Ich versuche, Mehrfachbindung in Angular 4 mit * ngIf und * ngFor zu verwenden, aber ich habe diesen Fehler:
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>
4 Antworten
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>
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
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>
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>