Question

我正在努力使默认选择的选项起作用并根据我在Angular 8（材料）应用程序中单击按钮进行更改。

我创建了一个堆栈闪电来演示相同的情况。

https://stackblitz.com/edit/angular-hbocgp

我希望该区域下拉菜单将默认选项选择为“北美”，然后单击按钮将其设置为其他选项。

app.component.html

<mat-card>
      <mat-form-field>
        <mat-label>Region</mat-label>
        <mat-select [(ngModel)]="regionSelected">
          <mat-option *ngFor="let row of regionSelectionList" [value]="row">
            {{row.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <button mat-raised-button color="primary" (click)="setRegion()">Set Region</button>
</mat-card>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  regionSelected = { "itemId": 1, "name": "North America Seed" };
  regionSelectionList = [
    {"itemId":1, "name":"North America Seed"},
    {"itemId":67505, "name":"1B:  CU2 (North and Far West)"},
    {"itemId":67504, "name":"1C:  CU1 (Western Cornbelt)"},
    {"itemId":67506, "name":"1K:  CU3 (Eastern Cornbelt)"},
    {"itemId":67503, "name":"1U:  CU4 (Southern)"},
    {"itemId":65143, "name":"5A:  CU5 (Canada)"}
    ];

    setRegion(){
      console.log("Clicked");
      this.regionSelected = {"itemId":67505, "name":"1B:  CU2 (North and Far West)"};
    }
}

更新：

感谢所有答案，但我最终使用以下内容：

//默认

this.regionSelected = this.regionSelectionList[this.regionSelectionList.findIndex(lst => lst.itemId == 1)];

//在按钮上单击

this.regionSelected = this.regionSelectionList[this.regionSelectionList.findIndex(lst => lst.itemId == 67505)];

Answer 1

尝试如下。

  regionSelected: any;

  constructor() {
    this.regionSelected = this.regionSelectionList[0];
  }

更新

如果要在单击按钮时将第二个区域设置为 select ，则可以按照以下步骤进行操作。

setRegion(){
  this.regionSelected = this.regionSelectionList[1];
}

StackBlitz

Answer 2

@SudarshanaDayananda的Anser实际上是正确的，但还没有完成，这是工作中的Stackblitz： https://angular-byx9ux.stackblitz.io

为什么您的方式行不通？您的

实例

regionSelected = { "itemId": 1, "name": "North America Seed" };

可能具有相同的变量，但是与数组中的对象相比，它是一个不同的对象。在select中，您要设置数组中的对象，因此设置的模型将与您的选择选项不匹配。

另一种可能是设置自己的比较功能：

HTML：

<select [compareWith]="compareFn" ..>

TS ：

compareFn(item1: any, item2: any) {
    return item1 && item2 && item1.itemId === item2.itemId;
}

Answer 3

问题是引用相等。即使在示例代码中使用了所有相同的数据，您仍在创建不同的对象。

之所以会这样，是因为您在模板中绑定了[value]="row"，其中row是一个对象。如果您改为绑定到row.itemId，并从一开始就使regionSelected等于1，并且不要在setRegion()函数中分配对象，请分配一个必要的{ {1}}-可以。

赞：

itemId

或者，您可以只使用import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; regionSelectionList = [ {"itemId":1, "name":"North America Seed"}, {"itemId":67505, "name":"1B: CU2 (North and Far West)"}, {"itemId":67504, "name":"1C: CU1 (Western Cornbelt)"}, {"itemId":67506, "name":"1K: CU3 (Eastern Cornbelt)"}, {"itemId":67503, "name":"1U: CU4 (Southern)"}, {"itemId":65143, "name":"5A: CU5 (Canada)"} ]; regionSelected = 1; setRegion(){ console.log("Clicked"); this.regionSelected = 67505; } }中的相同对象，然后让Angular通过引用对其进行比较：

regionSelectionList

如何从代码中选择角材选择选项

3 个答案: