Angular 4中*ngIf与*ngFor多绑定使用报错求助

你遇到的这个问题是Angular的核心规则导致的：同一个DOM元素不能同时应用两个结构型指令（比如*ngFor和*ngIf）。结构型指令会直接修改DOM结构，同时使用两个会让Angular无法确定指令的执行顺序，从而抛出错误。另外你的代码里还重复写了iconUrl属性，这也会导致属性冲突，得一起修正。

下面给你两种可行的解决方案：

方案一：使用<ng-container>分离指令 #

<ng-container>是Angular提供的虚拟容器，它不会被渲染成实际的DOM元素，非常适合用来承载结构型指令，帮你分离*ngFor和*ngIf：

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
  <ng-container *ngFor="let o of m">
    <agm-marker 
      *ngIf="!(o.breakdown || o.on_service)"
      [latitude]="o.latitude" 
      [longitude]="o.longitude"
      [iconUrl]="(o.breakdown || o.on_service) ? '../../assets/img/pin-maintenance.png' : '../../assets/img/icon-pin.png'"
    ></agm-marker>
  </ng-container>
</agm-map>

这里我们把*ngFor放在<ng-container>上遍历所有o，然后在<agm-marker>上用*ngIf过滤符合条件的项，同时用三元表达式统一处理iconUrl的赋值，避免重复属性的问题。

方案二：在*ngFor中直接过滤数组 #

如果你不想额外添加容器，可以直接在*ngFor的表达式里过滤数组，只循环符合条件的项：

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
  <agm-marker 
    *ngFor="let o of m.filter(item => !(item.breakdown || item.on_service))"
    [latitude]="o.latitude" 
    [longitude]="o.longitude"
    [iconUrl]="(o.breakdown || o.on_service) ? '../../assets/img/pin-maintenance.png' : '../../assets/img/icon-pin.png'"
  ></agm-marker>
</agm-map>

不过要注意：模板中直接使用filter方法会在每次Angular变更检测时重新执行，可能带来性能问题。如果你的数据频繁变化，更推荐在组件类中提前过滤好数据，再传递到模板中循环。

额外提示 #

你原来的*ngIf条件(o.breakdown == false || o.on_service == false)逻辑可能不符合预期——它会显示所有“未故障”或者“未在服务中”的标记，但结合图标逻辑来看，你可能需要的是“既不故障也不在服务中”的标记才显示？如果你的需求是显示所有标记，只是根据状态切换图标，那其实不需要*ngIf，只保留三元表达式的iconUrl即可。

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