在Angular中過濾出選項值

Question

我正在嘗試Angular 2中的一個場景，在這裏我們可以從下拉列表中選擇Super Powers，這些下拉列表將從預定義列表中填充。而且，我不希望任何兩個超級英雄擁有相同的超級動力。

我已經嘗試過，如下所示。

HTML：

<div class="form-group"> 

    <label>Hero One</label> 
    <select (ngModelChange)="onChange($event)" class="form-control" name="sel"> 
    <option *ngFor="let pow of powers"> 
     <span *ngIf="check(pow)">{{pow}}</span> 
    </option> 
    </select> 

</div> 

<div class="form-group"> 

    <label>Hero Two</label> 
    <select (ngModelChange)="onChange($event)" class="form-control" name="sel1"> 
    <option *ngFor="let pow of powers"> 
     <span *ngIf="check(pow)">{{pow}}</span> 
    </option> 
    </select> 

</div> 

<div class="form-group"> 

    <label>Hero Three</label> 
    <select (ngModelChange)="onChange($event)" class="form-control" name="sel2"> 
    <option *ngFor="let pow of powers"> 
     <span *ngIf="check(pow)">{{pow}}</span> 
    </option> 
    </select> 

</div> 

Component.ts

export class HeroFormComponent { 

    powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer']; 

    array = [];//storing the previously selected superpowers 

    check(p) { 
    var condition = this.array.length; 

    for (var i = 0; i <= this.array.length; i++) { 
     if (condition != 0) { //dont check if array is empty, just return true 
     if (p === this.array[i]) { //return false if the superpower is present 
      return false; 
     } 
     //return true, since power doesnt belong to anyother hero 
     return true; 
     } 
     return true; 
    } 
    } 

    onChange(p: string) { 
    this.array.push(p);//push the selected values in this array; 
    console.log(this.array); 
    } 

} 

我想我沒有使用ngFor或ngIf得當，可以請你指出我在做什麼錯了，還是我怎麼會做到這一點。

Answer 1

就我個人而言，我會做的是這樣的：

<select (change)="updatePowers(power, hero1)" [(ngModel)]="hero1.power"> 
    <option *ngFor="let pow of powers">...</option> 
</select> 

在您的組件：

powers = ['P1', 'P2', 'P3']; 
hero1 = { name: 'Harold', power: undefined }; 

updatePowers(power: string, hero: any): void { 
    if(hero.power) { this.powers.push(power); } 
    hero.power = power; 
    this.powers.slice(this.powers.indexOf(power), 1); 
} 

基本上，你在做什麼是每次你改變的力量，它從陣列中撤出，並推入英雄。而且，如果你改變了英雄的力量，那麼力量就會重新回到陣列中，然後改變。

既然你有幾個英雄，你可以做的是：

<ng-container *ngFor="let hero of heroes; let i = index"> 
    <h1>{{hero.name}}'s power </h1> 
    <select (change)="updatePowers(power, hero)" [(ngModel)]="heroes[i].power"> 
     <option *ngFor="let pow of powers">...</option> 
    </select> 
</ng-container> 

在您的組件：

powers = ['P1', 'P2', 'P3']; 
heroes = [ 
    { name: 'Harold', power: undefined }, 
    { name: 'Kumar', power: undefined }, 
]; 

updatePowers(power: string, hero: any): void { 
    if(hero.power) { this.powers.push(power); } 
    hero.power = power; 
    this.powers.slice(this.powers.indexOf(power), 1); 
}