2017-12-20 5 views
1

ändern, lässt ich diese ngFor Schleife übernehmen haben:Angular - ngFor Variable nach Klick So

<ng-container*ngFor="let rate of [1,2,3,4,5]"> 
    <div (click)="change()">{{myVariable}}</div> 
</ng-container> 

Ich habe variable 5-mal in meiner Vorlage angezeigt, was soll ich tun, um variabel zu ändern, nachdem Sie darauf klicken , dass die eine, die geklickt wurde und die vorherige, geändert wird und die nächste bleibt wie sie war. Wenn ich habe:

export class StarRatingComponent { 
    myVariable = 'a'; 

    change() { 
    this.myVariable = "b"; 
    } 
} 

Wenn ich auf a klicken dann alle auf b geändert werden. Wie kann diese Änderung nur für angeklickte Objekte und vorherige angewendet werden? also für zB. von aaaaa bis bbbaa?

Antwort

0

Einfach den Wert der ausgewählten Bewertung übergeben.

So etwas wie dies funktionieren könnte:

<ng-container*ngFor="let rate of [1,2,3,4,5]"> 
    <div (click)="change(myVariable)">{{myVariable}}</div> 
</ng-container> 

Dann in der Komponente durch Index diejenigen verfolgen:

export class RatingCmp { 
    rating: string = '1'; 
    change(rating) { 
    this.rating = rating; 
    } 
} 
+0

Saddly, es doesn‘ t arbeiten. + Ich weiß, wie man die Anzahl der angeklickten Objekte abruft. Wenn also jemand auf die dritte klickt, bekomme ich "3", weiß aber nicht, wie ich "a" in "b" ändern kann, aber danke für deine Hilfe und Zeit. – littletoottoot

+0

In diesem Fall fehlen Informationen. Was genau willst du ändern? Sie haben nur einzelne "a" auf der Komponente, natürlich ist es für alle verändert? – Zlatko

0

mit folgendem Ansatz Versuchen:

<ng-container*ngFor="let value of values; index as i"> 
    <div (click)="change(i)">{{value}}</div> 
</ng-container> 

export class StarRatingComponent { 
    values = this.generateValues('a',5); 

    private generateValues(val: string, times: number): string[]{ 
    const result: string[] = []; 
    while(--times >= 0){ 
     result.push(val); 
    } 
    return result; 
    } 

    change(index: number) { 
    while(index >= 0){ 
     this.values[index] = 'b'; 
     index--; 
    } 
    } 
}