角度のオプション値をフィルタリングする

Question

角度2のシナリオを試しています。そこでは、定義済みリストから入力されるドロップダウン内のヒーローにスーパーパワーを選択できます。そして、私はどんな2つのスーパーヒーローにも同じスーパーパワーを持たせたくありません。

私は以下のように試しました。

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); 
}