Angular 4中的多个指令

Question

I'm trying to use multiple binding in Angular 4 with *ngIf and *ngFor but I have this error:

ERROR IMAGE

code :

   <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>

and I've tried also with this code but also error:

   <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

Try with using the <ng-container> tag. It's a non-esthetical tag which could be useful for doing multiple directives.

In you code could become something like:

<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>

Remember that with using a directive under another, you can access the father directive values.
I explain better. In this example, from the internal agm-marker tag you can access "o" value from its father tag directive, which is "o" value used on ng-container

Answer 2

Means that you can't use two structural directives on the same element - directives with prefix * . Separate them like this

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

</agm-marker>

Answer 3

You can not use two structural directives on the same element.

You need to wrap your element in another one.

It's advised to use ng-container since it wont be rendered in DOM.

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

    </agm-marker>
</ng-container>

Answer 4

Multiple structure directives are not allowed on the same tag.

If you want to use multiple bindings of structure directive then you can follow these solutions...

Solution 1

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
  <agm-marker 
    ngFor let-o [ngForOf]="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>

Solution 2 (ng-container do not render in HTML)

<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>

As per your requirement, you need iconUrl attribute binding which is based on condition. so here you can use ternary operator like this...

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