Stil ändern spezifischer Element innerhalb * ngFor ohne Klasse

Question

Ich habe eine Vorlage wie folgt aus:

<div> 
    <span class="tag label label-primary" *ngFor="let tag of tags"> 
     {{ tag }} 
    </span> 
</div> 

ich eine Funktion addTag(tag) in meiner Komponente haben, die erlaubt nur ein Tag zum Array hinzugefügt werden, wenn es existiert nicht schon.

private addTag(tag) { 
    // Checks if the tag is empty or only consists of whitespace 
    // or is already in tags array 
    if (tag.replace(/\s/g, "").length == 0 || _.contains(this.tags, tag)) 
     return; 

    this.tags.push(tag.trim()); 
} 

Wenn der Benutzer einen Tag hinzuzufügen versucht, die bereits vorhanden ist, möchte ich blinken (gesetzt Opazität auf Null und erhöhen sie mit setInterval), um die bereits vorhandenen Tag.

Wie ändere ich die Deckkraft des richtigen Bereichselements?

Answer 1

Sie so etwas wie dies versuchen könnte:

<span [ngClass]="{flash:i==flashIndex}" class="tag" *ngFor="let tag of tags;let i = index"> 
    {{ tag }} 
</span> 
... 
flashIndex: number; 
tags: Array<string> = []; 
addTag(tagInput) { 
    let tag = tagInput.value; 
    if (!tag.replace(/\s/g, "").length) return; 

    const existedItem = this.tags.find(x => x === tag); 

    if (existedItem) { 
    this.flashIndex = this.tags.indexOf(existedItem); 
    setTimeout(()=> this.flashIndex = -1, 1000); 
    return; 
    } 

    this.tags.push(tag.trim()); 
    tagInput.value = ''; 
} 

Siehe entsprechende plunker

Answer 2

<div> 
    <span [style.opacity]="flash" class="tag label label-primary" *ngFor="let tag of tags"> 
     {{ tag }} 
    </span> 
</div> 

Der Wert der flash Eigenschaft in Ihrer Komponentenklasse wird auf den Stil-Elemente gesetzt werden.

Alternative:

<div> 
    <span [ngStyle]="{opacity:flash}" class="tag label label-primary" *ngFor="let tag of tags"> 
     {{ tag }} 
    </span> 
</div>