Angular Material Select (mat-select) - 如何设置默认值答案

【问题标题】：Angular Material Select (mat-select) - How to set default valueAngular Material Select (mat-select) - 如何设置默认值
【发布时间】：2020-02-28 14:28:42
【问题描述】：

很多问题都在讨论设置默认值以显示在“选择”控件中的方法，这里我公开了一个 Angular 8 模板驱动的表单案例，其中我无法获得在 mat-select 中显示的默认值单击按钮时，即使 console.log 显示正确的值：

<mat-select [formControl]="itemControl" required [(value)]="itemValue">
    <mat-option>--</mat-option>
    <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
</mat-select>

我的组件代码部分如下：

export class MyComponent {

  items: string[] = [''];
  itemControl = new FormControl('', [Validators.required]);
  itemValue: string = '';

  myButtonClick(): void {
        this.itemValue = this.getItems()[0];     <--- This returns the first element in a valid array
        console.log(this.itemValue);
      }
}

那我做错了什么？

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

由于你使用的是表单控件，所以应该给itemControl赋默认值，例如

  this.itemControl.patchValue(this.getItems()[0])

您可以从 onInit 生命周期挂钩或从 api 响应中分配它。所以表单控件可以相应地更新值。 mat-select 指令不支持 value 属性的双向数据绑定。

【讨论】：

你能回答这个吗：stackoverflow.com/questions/60465057/…

【解决方案2】：

例子：

html:

 <form [formGroup]="entregaSelecao">
       <mat-form-field class="form-input">
           <mat-label>Bairro</mat-label>
           <mat-select disableRipple formControlName="bairro">
              <mat-option  *ngFor="let item of bairros" [value]="item">{{item}}</mat-option>
           </mat-select>
       </mat-form-field>
   </form>

.ts:

public enderecoForm: FormGroup;

bairros: string[] = ['bairro 1', 'bairro 2', 'bairro 3'];
ngOnInit() {
    this.entregaSelecao = this.formBuilder.group({
          entregaSelecionado: ['', Validators.required]
    });
}

【讨论】：