在同一页面中进行独立选择？答案

【问题标题】：make independent select in the same page?在同一页面中进行独立选择？
【发布时间】：2021-05-06 13:27:05
【问题描述】：

在我的项目中，我想做两次选择。但是，如果我更改页面顶部的arrayScelta 选择，页面底部也会更改。我怎样才能使两个选择独立？

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

【问题讨论】：

提供不同的 ngModel。 [(ngModel)]="sceltaId1", [(ngModel)]="sceltaId2"
@ArmenStepanyan 没用。我收到消息：Property 'sceltaId1' does not exist on type 'MatriceComparazioneComponent'. Did you mean 'sceltaId'?
我只是给你看个简单的例子，当然不行，你必须在你的组件中定义这两个新变量

标签： javascript html angular html-select onchange

【解决方案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>

【讨论】：