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>

打字稿重要方法

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和Materialize CSS 1.0

Answer 1

为此，您需要添加[innerHTML]，这样才能在html内像这样生成table

[innerHTML]="user.dropdown"

user.dropdown可能是string文件中定义的空.ts或您想在drop-down中使用的某个值。

根据您的情况，也可以使用user.apiKey。

Answer 2

在用户作用域具有数据后，尝试通过添加

在视图中呈现表/行

<ng-container *ngIf="users.length">
  <tr *ngFor="let user of users">
  .
  .
  .
  </tr>
</ng-container>

希望这会有所帮助！

Answer 3

嘿@Marc Serret i Garcia ...我找到了解决方法。请尝试我提供的解决方案是否有效：-

<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' [attr.data-target]='user.apiKey'>Drop Me!</a>
            <ul [id]='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>

寻找我所做的更改- <a class='dropdown-trigger btn' [attr.data-target]='user.apiKey'>Drop Me!</a>

另一个为下拉列表的ID-<ul [id]='user.apiKey' class='dropdown-content'>。它为我工作。希望这会有所帮助。

请看看我的堆叠闪电战：-https://stackblitz.com/edit/multipledropdown

在ngFor Angular 8中实现CSS下拉列表

3 个答案: