使用 mat-select 组件设置默认选定选项的正确方法

Question

使用 Angular 2 和 Angular Material 6.4.7

我需要使用 mat-select 组件设置默认选择的选项。

以下代码按原样工作，并在我不使用 [formControl] 绑定时设置默认值。

下面的例子：

<mat-form-field>
    <mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

当前年份 (currentYear) 是一个变量，用于设置当前年份的值。

但是，当我使用表单控件绑定时，它无法在 mat-select 组件上设置默认选项。

下面的例子：

<mat-form-field>
    <mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

我搜索了堆栈溢出并遇到了这个可行的解决方案，但是我在浏览器控制台中收到警告，我不确定这是否是实现此目的的正确方法。

下面的例子：

<mat-form-field>
    <mat-select [(ngModel)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

我得到的警告如下：

看起来您在与 formControl 相同的表单字段上使用 ngModel。Angular v6 中不推荐使用 ngModel 输入属性和 ngModelChange 事件与响应式表单指令，并将在 Angular v7 中删除。有关这方面的更多信息，请参阅我们的 API 文档：https : //angular.io/api/forms/FormControlDirective#use-with-ngmodel

我已经阅读了上面的输出，但仍然不明白如何解决这个问题。

任何帮助澄清或启发我实现这一目标的正确方法将不胜感激。

Answer 1

控制台警告会准确地告诉您问题是什么，要么使用ngModel指令，要么使用formControl指令，而不是两者都使用。

查看该如何选择一个默认选项的问题formControl（这是一个多选，但它的工作方式是相同的情况下）。

您的模板代码应如下所示：

<mat-form-field>
  <mat-select placeholder="Select A Year" [formControl]="year.get('year')" >
      <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
  </mat-select>
</mat-form-field>

在你的组件中，你可以设置你的值FormControl，即像这样：

ngOnInit() {
  this.year.get('year').setValue(this.currentYear);
}