Angular4: Ausschließen von Listenelementen in einem Array

Question

Ich bin neu in Angulare4 und möchte Elemente aus einer Liste ausschließen, wenn sie bereits in einem Array enthalten sind.

Angenommen, ich habe ein userItems-Array. Der Benutzer kann ein Element aus einer Liste hinzufügen, aber im aktuellen Status des Projekts wird eine Fehlermeldung angezeigt, wenn er ein Element auswählt, das er bereits besitzt.

Eine einfachere und benutzerfreundlichere Vorgehensweise wäre, nur die Elemente anzuzeigen, die er nicht bereits besitzt.

Dies ist, was ich zur Zeit mit:

<option *ngFor="let userItem of userItems" value="{{ userItem.id }}"> 
{{ userItem.name }} 
</option> 

Wie konnte ich die Ergebnisse filtern? Ich dachte über die Verwendung eines Rohres

Answer 1

Wenn ich verstehe, was Sie wollen, können Sie einfach den Wert der Eingabe beobachten und diesen aus der Liste entfernen.

Sie können die option input einer lokalen Variablen in Ihrer Sicht zuordnen, indem Sie die Syntax #input innerhalb des Tags verwenden. Und dann können Sie die Anweisung *ngIf auf Ihre Menüpunkte anwenden, um sie mit dem aktuellen Wert zu vergleichen. Und dasjenige herausfiltern, das dem aktuellen Wert entspricht.

Zum Beispiel:

<option #input *ngFor="let userItem of userItems" value="{{ userItem.id }}"> 
    <ng-container *ngIf="userItem.id !== input.value"> 
     {{ userItem.name }} 
    </ng-container> 
</option> 

Answer 2

Mein Rat ist, verwenden ng-template:

<option *ngFor="let userItem of userItems" value="{{ userItem.id }}"> 
    <ng-template [ngIf]="some-condition"> 
    {{ userItem.name }} 
</ng-template> 
</option> 

Die Alternative ist Ihr Array in Ihrer Komponente filtern filter auf dem Array zu verwenden, wenn der Benutzer den neuen Wert einfügen .

userItems.filter(value => value !== 3); 

Ich habe Ihre Frage vielleicht nicht vollständig verstanden. Wenn nicht, bitte sei genauer.