Angular 4: Table 动态数据

Question

我正在尝试使用 angular 4 创建一个动态 table，但不允许我将 *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 Uncaught Error: Template parse errors: Can't bind to 'ngFor' since it isn't a known property of 'tr'. (" ]*ngFor="user in users"> {{user.firstName}} {{user.lastName}} "): ng:///AppModule/UserListComponent.html@15:10 Can't bind to 'ngForIn' since it isn't a known property of 'tr'. ("

Answer 1

你 ngFor 是错误的，因为 ngForIn 已被弃用 (refer docs)

<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: Table 动态数据

Angular 4: Table with dynamic data

javascript

ngfor

angular