Angular 2 - Wie schreibe ich einen ngIf, der prüft, ob ich schon etwas in meinen Warenkorb gelegt habe?

Question

Ich habe eine Liste von Alben, mit denen ich die Alben auf der Seite rendern kann.

Die Liste ist nur ein Array von Album-Objekten, eine der Eigenschaften des Objekts ist ID.

Wenn ich ein Album zu meinem Warenkorb hinzufüge, füge ich dieses Album-Objekt meinem Warenkorb-Array hinzu.

Wie kann ich meine ngIf schreiben, wenn ich zwei verschiedene Arrays verfolge?

Also hier ist ein Beispiel, wie ich das Album auf der Seite machen:

<h4 class="album-title">{{album.title}}</h4> 
<p class="album-info-artist">{{album.artist}}</p> 
<button class="btn btn-sm" (click)="add(album)">Add</button> 

Wenn ich auf den Button Text von Add ändern möge, zu entfernen, sobald ich ein Album hinzufügen, wie kann ich schreiben, dass ngIf? Oder gibt es einen besseren Weg? Ich muss die album.id von dem Album-Array verfolgen und ich muss die cart.id verfolgen, wenn ich das Album in den Warenkorb lege.

Ich weiß, wie dies in reactJS zu tun, aber ich bin neu bei ng2 und nicht sicher, wie dies zu erreichen ist.

Answer 1

In Ihrer Komponente:

isAlbumInCart(album) { 
    return cart.indexOf(album) >= 0; 
} 

Ihrer Ansicht

<button *ngIf="!isAlbumInCart(album)" class="btn btn-sm" (click)="add(album)">Add</button> 
<button *ngIf="isAlbumInCart(album)" class="btn btn-sm" (click)="remove(album)">Remove</button> 

Natürlich ist die Anordnung sehr groß ist, ist dies nicht sehr schnell ist. Sie können dem Album einfach eine Markierung hinzufügen, wenn Sie es zum Warenkorb hinzufügen, und diese Markierung aktivieren.