Question

我正在尝试使用angular 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>

确切的错误是：

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

Answer 1

由于ngFor已弃用（refer docs），您ngForIn错误

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

<强> LIVE DEMO

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关键字声明您在模板中引用的模板输入变量。

Angular 4：包含动态数据的表

2 个答案: