Angular条件显示表格行报错：单个元素不能用多个模板绑定

你遇到的错误是因为Angular不允许在同一个元素上绑定多个带*的结构型指令（比如*ngFor和*ngIf），这两类指令都会修改DOM结构，同时使用会导致逻辑冲突。下面给两种实用的解决办法：

办法1：用<ng-container>拆分指令 #

<ng-container>是Angular提供的虚拟容器，不会渲染成实际DOM元素，刚好用来承载其中一个指令，避免冲突。把*ngFor放在<ng-container>上，内部的<tr>只保留*ngIf：

<ng-container *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index">
  <tr *ngIf="data.status=='1'">
    <td></td>
    <td></td>
  </tr>
</ng-container>

这个方式的逻辑是：先循环所有分页后的数据，再只渲染其中status=='1'的行。

办法2：提前过滤数据（更简洁） #

如果你的需求是先过滤所有status=='1'的数据，再对这些数据分页，可以在组件里先处理好过滤后的列表，模板里直接用过滤后的列表循环：

组件代码（.ts文件） #

// 定义计算属性，实时过滤数据
get filteredList() {
  return this.list.filter(item => item.status === '1');
}

模板代码 #

<tr *ngFor="let data of filteredList| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index">
  <td></td>
  <td></td>
</tr>

这种方式模板更干净，而且分页是针对所有符合条件的数据进行的，适合大多数场景。

内容的提问来源于stack exchange，提问作者user3653474