📅  最后修改于: 2023-12-03 15:26:16.828000             🧑  作者: Mango
当在使用Angular中的table组件时,可能会出现以下错误:
Can't bind to 'ngForOf' since it isn't a known property of 'th'.
这个错误的原因是你想使用ngForOf指令来循环绑定table中的数据行。
解决这个问题非常简单,只需将*ngFor
改为*ngForOf
即可。因为table中的数据行是由<tr>
标签组成的,<tr>
标签不是一个直接支持ngForOf
的指令,但是他的父级<tbody>
标签支持。
以下是正确的使用方式:
<table>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td>{{ item.column1 }}</td>
<td>{{ item.column2 }}</td>
<td>{{ item.column3 }}</td>
</tr>
</tbody>
</table>
本文针对Angular 2+版本的开发,如果您使用的是AngularJS版本的应用程序,则可能需要使用ng-repeat
指令。
在这种情况下,将代码更改为以下内容:
<table>
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{ item.column1 }}</td>
<td>{{ item.column2 }}</td>
<td>{{ item.column3 }}</td>
</tr>
</tbody>
</table>
总之,为了解决这个问题,您需要将*ngFor
改为*ngForOf
和确定正确的父级容器。
希望本文能够帮助您理解这个错误并解决它。