【Angular】Can‘t have multiple template bindings on one element. Use only one attribute...

目录

一. 场景再现（一个元素上同时使用 *ngIf 和 *ngFor）

二. 解决方案（使用 包裹组件）​​​​​​​

---

一. 场景再现（一个元素上同时使用 *ngIf 和 *ngFor）

• 下面是 Angular 中的模板代码：

<ths-progress-bar
  *ngIf="!commonUtils.isEmpty(oneBillProcess)"
  *ngFor="let process of oneBillProcess"
  type="top"
  [color]="process.color"
  [title]="process.title"
  [info]="process.num + '个'"
  [max]="defaultBillMax"
  [num]="process.num"
>
</ths-progress-bar>

• 报错信息：Can't have multiple template bindings on one element. Use only one attribute prefixed with * xxx
• 翻译：一个元素上不能有多个模板绑定，只使用一个前缀为 * xxx 的属性

• ---

  综上所述，报错是因为：同时在一个元素上使用了 *ngIf 和 *ngFor

---

二. 解决方案（使用 <ng-container> 包裹组件）

• <ng-container> 是一个逻辑容器，用于对 节点分组，不作为 DOM 树中的节点，最终会被渲染为 HTML 中的 comment 元素（就是注释）

• ---

  总结：<ng-container>  实现了 “不添加 额外元素 的同时，又能使用 结构指令”

<ng-container *ngIf="!commonUtils.isEmpty(oneBillProcess)">
  <ths-progress-bar
    *ngFor="let process of oneBillProcess"
    type="top"
    [color]="process.color"
    [title]="process.title"
    [info]="process.num + '个'"
    [max]="defaultBillMax"
    [num]="process.num"
  >
  </ths-progress-bar>
</ng-container>