如何使用*ngFor作为子组件角中的表

Question

我想显示用户的表：我必须在循环(*ngFor)中放置<tr>标记

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>