javascript - Angular 4 中的多个指令

Question

我正在尝试在 Angular 4 中使用 *ngIf 和 *ngFor 的多重绑定(bind)，但出现此错误:

ERROR IMAGE

代码:

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

我也试过这段代码，但也有错误:

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

Answer 1

尝试使用 <ng-container>标签。这是一个非美学标签，可用于执行多个指令。

在你的代码中可能会变成这样:

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

请记住，通过在另一个指令下使用指令，您可以访问父指令值。
我解释得更好。在此示例中，您可以从内部 agm-marker 标记访问其父标记指令中的“o”值，这是在 ng-container 上使用的“o”值