Ich versuche, Mehrfachbindung in Angular 4 mit * ngIf und * ngFor zu verwenden, aber ich habe diesen Fehler:

FEHLERBILD

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>

Und ich habe es auch mit diesem code versucht aber auch fehler:

   <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>
1
qfarawi55 19 Apr. 2018 im 15:09

4 Antworten

Beste Antwort

Bedeutet, dass Sie nicht zwei strukturelle Anweisungen für dasselbe Element verwenden können - Anweisungen mit dem Präfix *. Trenne sie so

<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>
1
Suren Srapyan 19 Apr. 2018 im 12:25

Versuchen Sie es mit dem Tag <ng-container>. Es ist ein nicht-ästhetisches Tag, das für die Ausführung mehrerer Anweisungen nützlich sein kann.

In Ihrem Code könnte so etwas werden wie:

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

Denken Sie daran, dass Sie bei Verwendung einer Direktive unter einer anderen auf die Werte der Vater-Direktive zugreifen können.
Ich erkläre es besser. In diesem Beispiel können Sie über das interne agm-marker-Tag auf den Wert "o" über die Direktive für den Vater-Tag zugreifen. Dies ist der Wert "o", der für ng-container verwendet wird

3
Deadpool 19 Apr. 2018 im 12:28

Sie können nicht zwei strukturelle Anweisungen für dasselbe Element verwenden.

Sie müssen Ihr Element in ein anderes einwickeln.

Es wird empfohlen, ng-container zu verwenden, da es nicht in DOM gerendert wird.

<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>
1
ritaj 19 Apr. 2018 im 12:29

Mehrere Strukturanweisungen sind nicht für dasselbe Tag zulässig.

Wenn Sie mehrere Bindungen der Strukturanweisung verwenden möchten, können Sie diesen Lösungen folgen ...

Lösung 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>

Lösung 2 (ng-Container wird nicht in HTML gerendert)

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

Gemäß Ihrer Anforderung benötigen Sie eine iconUrl -Attributbindung, die auf der Bedingung basiert. Hier können Sie also einen ternären Operator wie diesen verwenden ...

<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>
2
Abhishek Singh 19 Apr. 2018 im 13:01