角度4:包含动态数据的表格

Question

我想创建一个动态表角

<table class="table table-bordered table-sm m-0">
  <thead class="">
  <tr>
    <th>FirstName</th>
    <th>Name</th>
    <th>Registration Date</th>
    <th>Phone</th>
    <th>E-mail address</th>
    <th>Role</th>
  </tr>
  </thead>
  <tbody >
  <tr *ngFor="user in users">
    <td>{{user.firstName}}</td>
    <td>{{user.lastName}}</td>
    <td>{{user.registrationDate}}</td>
    <td>{{user.phoneNumber}}</td>
    <td>{{user.email}}</td>
    <td>{{user.userRole}}</td>
  </tr>
  </tbody>
</table>

确切的错误是:

compiler.es5.js:1690未捕获的错误:模板分析错误:无法绑定到“ngFor”，因为它不是“tr”的已知属性。("]*ngFor= "用户中的用户"

Answer 1

在angular的新语法中，需要为结构指令声明局部变量。因此使用，

<tr *ngFor="let user of users">
    <td>{{user.firstName}}</td>
    <td>{{user.lastName}}</td>
    <td>{{user.registrationDate}}</td>
    <td>{{user.phoneNumber}}</td>
    <td>{{user.email}}</td>
    <td>{{user.userRole}}</td>
  </tr>

让关键字声明一个输入变量的模板

Answer 2

您认为ngFor是错误的，因为ngForIn（请参阅文档）

<tr *ngFor="let user of users">
    <td>{{user.first_name}}</td>
    <td>{{user.last_name}}</td>
</tr>

现场演示