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

Question

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

我创建了一个 stackblitz 来演示。

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

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

这是因为在您的模板中绑定了[value]="row"，其中row 是一个对象。如果您改为绑定到row.itemId，并且从一开始就让regionSelected 等于1，而不是在setRegion() 函数中分配一个对象，而是分配一个必要的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;
  }
}

或者，您可以使用 regionSelectionList 中的相同对象并让 Angular 通过引用进行比较：

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 = this.regionSelectionList[0];


  setRegion(){
    console.log("Clicked");
    this.regionSelected = this.regionSelectionList[2];
  }
}

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

尝试如下。

  regionSelected: any;

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

更新

如果您想在点击按钮时将第二个区域设置为 select，您可以按如下方式进行。

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

StackBlitz