Question

我使用了角材料（“ @ angular / material”：“ 7.1.0 ”）垫选择框，然后我使用了窗体控件而不是ng模型，现在的问题是我可以t在加载组件时设置值。我需要从列表中将第一个值设置为mat-select框，我尝试过但不能这样做。

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

请帮助我。

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

Answer 2

Thilagabahan，如果[值]是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

Answer 3

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

在应用程序代码中使用两种方式的数据绑定作为 [(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

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

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

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

4 个答案: