css - 在 ngFor Angular 8 中实现 CSS 下拉菜单

Question

我正在尝试在使用 *ngFor 生成的表中添加 Materialize 下拉列表，但下拉列表未显示。如果我将下拉代码放在表格之外，它就可以工作。

<p>Users enabled in this node: {{usersEnabled}}</p>
<p>Users in this node: {{users.length}}</p>
<table>
    <thead>

        <th>
            Email
        </th>
        <th>
            Enabled
        </th>
        <th>
            Actions
        </th>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td>
                {{user.username}}
            </td>
            <td class="isLink cursorIcon" (click)="enableDisableUser(user.apiKey)">
                {{user.enabled}}
            </td>
            <td>

                <!-- Dropdown Structure -->
                <!-- <button class="btn" (click)="resetPassword(user)">Reset password</button> -->
                <a class='dropdown-trigger btn' data-target='dropdown{{user.apiKey}}'>Drop Me!</a>
                <ul id='dropdown{{user.apiKey}}' class='dropdown-content'>
                    <li><a href="#!">one</a></li>
                    <li><a href="#!">two</a></li>
                    <li class="divider" tabindex="-1"></li>
                    <li><a href="#!">three</a></li>
                    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
                    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Typescript重要方法

ngOnInit() {
    this.getUsers();
  }

  private getUsers(): void {
    this.userService.getUsersByNodeApiKey(this.nodeKey).subscribe(
      res => {
        this.usersEnabled = res.filter((user: User) => user.enabled).length;
        this.users = res.sort((a, b) => a.enabled < b.enabled ? 1 : -1);
        M.AutoInit();
        var elems = document.querySelectorAll('.dropdown-trigger');
        var instances = M.Dropdown.init(elems, {autoTrigger: true});
      },
      err => console.error(err)
    );
  }

我正在使用 Angular 8 和 Materialise CSS 1.0

Answer 1

为此，您需要添加 [innerHTML] 以在您的 table 中启用生成的 html，如下所示

[innerHTML]="user.dropdown"

user.dropdown 可能是 .ts 文件中定义的空 string 或您想在 下拉。

可能在您的情况下 user.apiKey 也可以使用。