在同一页面中进行独立选择?

Question

在我的项目中，我想做两次选择。但是如果我改变页面顶部的arrayScelta选择，页面底部也会改变。如何使这两个select独立?

<select (change)="onChange()" [(ngModel)]="sceltaId">
<option [ngValue]="a.id" *ngFor="let a of arrayScelta">
{{a.char}}
</option>          
</select>
<select>
<ng-container *ngIf="sceltaId">
<option [ngValue]="b.num" *ngFor="let b of comparazioneListDrop">
{{b.char}}
</option>
</ng-container>          
</select> 

...

<select (change)="onChange()" [(ngModel)]="sceltaId">
<option [ngValue]="a.id" *ngFor="let a of arrayScelta">
{{a.char}}
</option>          
</select>
<select>
<ng-container *ngIf="sceltaId">
<option [ngValue]="b.num" *ngFor="let b of comparazioneListDrop">
{{b.char}}
</option>
</ng-container>          
</select>

arrayScelta = [
{ id: 1, char:"è più importante di" },
{ id: 2, char:"è meno importante di" }
]
arrayComparazione = [
{ id: 1, char: "1/9", num: 1 / 9, sceltaId: 2 },
{ id: 2, char: "1/8", num: 1 / 8, sceltaId: 2 },
{ id: 3, char: "1/7", num: 1 / 7, sceltaId: 2 },
{ id: 4, char: "1/6", num: 1 / 6, sceltaId: 2 },
{ id: 5, char: "1/5", num: 1 / 5, sceltaId: 2 },
{ id: 6, char: "1/4", num: 1 / 4, sceltaId: 2 },
{ id: 7, char: "1/3", num: 1 / 3, sceltaId: 2 },
{ id: 8, char: "1/2", num: 1 / 2, sceltaId: 2 },
{ id: 9, char: "2", num: 2, sceltaId: 1 },
{ id: 10, char: "3", num: 3, sceltaId: 1 },
{ id: 11, char: "4", num: 4, sceltaId: 1 },
{ id: 12, char: "5", num: 5, sceltaId: 1 },
{ id: 13, char: "6", num: 6, sceltaId: 1 },
{ id: 14, char: "7", num: 7, sceltaId: 1 },
{ id: 15, char: "8", num: 8, sceltaId: 1 },
{ id: 16, char: "9", num: 9, sceltaId: 1 }
]
comparazioneId = undefined;
comparazioneListDrop = [];
sceltaId = undefined;
onChange() {
this.comparazioneId = undefined;
this.comparazioneListDrop = this.arrayComparazione.filter(
c => c.sceltaId === this.sceltaId
);
}

Answer 1

为选择提供不同的ngModel。在组件中创建2个属性。

export class AppComponent  {
sceltaId1 = '';
sceltaId2 = '';
constructor(){...}
}

在你的视图

<select 
(change)="onChange()" 
[(ngModel)]="sceltaId1"
>
<option 
[ngValue]="a.id" 
*ngFor="let a of arrayScelta"
>{{a.char}}
</option>  
-------
<select 
(change)="onChange()" 
[(ngModel)]="sceltaId2"
>
<option 
[ngValue]="a.id" 
*ngFor="let a of arrayScelta"
>{{a.char}}
</option>