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

Question

我正在尝试创建一个角度为4的动态表，但不允许将* ngFor与tr一起使用？ 任何想法如何解决这个问题？

<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>

确切的错误是：

editor.es5.js：1690未捕获的错误：模板解析错误：由于它不是'tr'的已知属性，因此无法绑定到'ngFor'。 （“] * ngFor =”用户中的用户“> {{user.firstName}} {{user.lastName}}”）：ng：///AppModule/UserListComponent.html@15：10无法绑定到'ngForIn '，因为它不是'tr'的已知属性。 （”

Answer 1

您ngFor ，因为ngForIn已过时（ 请参阅docs ）

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

现场演示

Answer 2

在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>

let关键字声明您在模板中引用的模板输入变量。