如何在子组件角度中使用* ngFor表

Question

我想显示一个表的用户： 我必须将<tr>标记放在循环（* ngFor）

中

UserComponent.html ：

<div class="theme-2">
  <div class="example-container mat-elevation-z8">
    <app-user *ngFor="let user of users" [user]="user"></app-user>
  </div>
</div>

UserComponent.html ：

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Email</th>
        <th>Created_at</th>
        <th>Updated_at</th>
    </tr>
    <tr>
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.created_at }}</td>
        <td>{{ user.updated_at }}</td>
    </tr>
</table>

现在结果！

  

所有表格标签都进入了* ngFor，我该如何解决这个问题？

Answer 1

*ngFor放在桌面上，而不是组件本身。现在你正在创建许多app-user组件的副本，这不是你想要的。

<app-user [users]="users"></app-user>

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Email</th>
        <th>Created_at</th>
        <th>Updated_at</th>
    </tr>
    <tr *ngFor="let user of users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.created_at }}</td>
        <td>{{ user.updated_at }}</td>
    </tr>
</table>