Angular 4：包含动态数据的表-Java 学习之路

我正在尝试用角度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 =”用户在用户“> {} {}”）：ng：///AppModule/UserListComponent.html@15：10无法绑定到'ngForIn '因为它不是'tr'的已知属性 . （”

2 回答

您 ngFor 错误，因为 ngForIn 已弃用（refer docs）

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

LIVE DEMO

回复于 2024-04-19T12:24:12+08:00

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

回复于 2024-04-19T12:24:12+08:00

Angular 4：包含动态数据的表

2 回答

相关问题