Materializecss angular 5 dropdown content dynamic generation throws error

Question

When I generate dynamic content with different dropdowns the dropdown throws an error. If I do not generate dynamic dropdown content it works, the problem is with that generation. It throws this error: ERROR TypeError: Cannot set property 'tabIndex' of null

html

<ul id="content-{{labSystem.system.name}}" 
    class="dropdown-content" *ngFor="let labSystem of nodeLabSystems">
    <li>
      <a href="#!">one</a>
    </li>
  </ul>

<div class="col s12 m12 l12 xl12 blue-grey lighten-1">
  <div id="instrumentStatus">
    <span class="right" *ngFor="let labSystem of nodeLabSystems">
      <a class="btn btn-flat dropdown-trigger" 
      data-target="content-{{labSystem.system.name}}" id="{{labSystem.system.name}}"
        (click)="open(labSystem.system.name)">{{labSystem.system.name}}</a>
    </span>
  </div>
</div>

typescript

  open(dropdown): void {
    const elem = document.getElementById(dropdown);
    const instance = M.Dropdown.init(elem, {constrainWidth: true});
    instance.open();
  }