加载组件时如何在角度垫选择中设置值？答案

【问题标题】：How to set value in angular mat-select when component loading?加载组件时如何在角度垫选择中设置值？
【发布时间】：2019-06-18 13:08:51
【问题描述】：

我使用了 angular material("@angular/material": "7.1.0") 垫选择框，然后我使用了表单控件而不是 ng 模型，现在问题是我不能t 在加载组件时设置值。我需要将第一个值设置为列表中的 mat-select 框，我试过了，但我做不到。

我在 stackblitz 创建了一个代码，这里是链接：https://stackblitz.com/edit/angular-zt1a9f

请帮帮我。

【问题讨论】：

我会在问题中添加一些代码，然后链接 stackblitz 以查看详细信息。

标签： angular angular-material angular-forms

【解决方案1】：

使用compareWith 通过比较函数内部的名称来选择默认值。另请注意，我已将value 绑定更改为[(value)] ="animal"。并删除了selectedValue。您通过在formControl 中分配它来选择默认值，看看下面的组件更改。

<form [formGroup]="myGroup">
<mat-form-field>
  <mat-select placeholder="Favorite animal" [compareWith]="compareThem" formControlName="animalControl" required >
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [(value)] ="animal"  >
      {{animal.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

在您的组件中，添加：

export class AppComponent  {

  animals = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];  

  myGroup = new FormGroup({
      animalControl: new FormControl(this.animals[1], [Validators.required]) //I'm assigining Cat by using this.animals[1], you can put any value you like as default.
  });


  compareThem(o1, o2): boolean{
    console.log('compare with');
    return o1.name === o2.name;
  }
}

【讨论】：

@Aragom，你有 [ngValue]="animal.name"，必须是 [ngValue]="animal"

【解决方案2】：

Thilagabahan，如果 [value] 是 animals.name

<mat-option *ngFor="let animal of animals" [value]="animal.name">

简单地说，当你创建表单时，给出值（否则看看 Aragom 的答案）

    selectedValue = this.animals[0].name;
    myGroup = new FormGroup({
      animalControl: new FormControl(this.selectedValue, [Validators.required])
  });

看到最后一个是创建formGroup

【讨论】：

【解决方案3】：

当您将整个 animal 对象分配给 mat-option 的值时，那么在这种情况下
您必须使用两种方式的数据绑定用于提供选定的选项值。

在您的应用程序代码中使用 2 路数据绑定作为 [(ngModel)]="selectedValue"
而不是 [(value)]="selectedValue"，此变量 selectedValue 将是您分配给 mat-option 的动物对象类型为

<mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
</mat-option>`

现在，将ngOnint() 中的这个变量赋值为

ngOnInit() {
  this.selectedValue =  this.animals[0]; // selecting first aninmal object as default value
}

Stackblitz Demo - setting mat-select value at Component Loading

【讨论】：

【解决方案4】：

这是一个例子

<mat-select [compareWith]="compareFn" [(ngModel)]="defaultItem">
    <mat-option *ngFor="let country of countries" [value]="item">
        {{country.name}}
    </mat-option>
</mat-select>

compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

如果您的选项不包含 id，那么您的 compareFn 将如下所示：

compareFn(c1: Country, c2: Country): boolean {
    if(c1 && c2) {
       (c1.id || c2.id) ? c1.id === c2.id : c1 === c2;
    }
}

参考1：https://material.angular.io/components/select/overview#getting-and-setting-the-select-value 参考2：https://angular.io/api/forms/SelectControlValueAccessor#customizing-option-selection

【讨论】：