0
我正在尝试Angular 2中的一个场景,在这里我们可以从下拉列表中选择Super Powers,这些下拉列表将从预定义列表中填充。而且,我不希望任何两个超级英雄拥有相同的超级动力。在Angular中过滤出选项值
我已经尝试过,如下所示。
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得当,可以请你指出我在做什么错了,还是我怎么会做到这一点。