angular素材中如何设置默认值组select

Question

我正在尝试为 material.io 表单设置一个默认值，但我似乎无法让它与组版本一起使用。 这是我的代码

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{ pokemon.viewValue }}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>



selected = 'bulbasaur-0';

  pokemonGroups = [
    {
      name: 'Grass',
      pokemon: [
        { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
        { value: 'oddish-1', viewValue: 'Oddish' },
        { value: 'bellsprout-2', viewValue: 'Bellsprout' }
      ]
    },
    {
      name: 'Psychic',
      pokemon: [
        { value: 'mew-9', viewValue: 'Mew' },
        { value: 'mewtwo-10', viewValue: 'Mewtwo' },
      ]
    }
  ];

Answer 1

要将选项设置为选定，您的选择模型必须处理所需的选项。

由于您使用反应式形式，请尝试像这样创建它：

this.myForm = this.fb.group({
  pokemonControl: this.pokemonGroups[0][0]
});

如果您不使用反应式形式，请使用此

pokemonControl: new FormControl(this.pokemonGroups[0][0]);

Answer 2

我找到了你的问题的解决方案。

Angular Select 文档对简单的mat-select和mat-option value属性使用双向绑定......但是mat-optgroup不起作用，所以你最好使用NgModel绑定。

HTML：

**<**mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl" [(ngModel)]="selected">
   <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                              [disabled]="group.disabled">
       <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
                    {{pokemon.viewValue}}
       </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

TS：

selected: string = 'squirtle-3';

更新：

以上将适用于 Angular 6，您将发出警告。

看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中不推荐使用 ngModel 输入属性和 ngModelChange 事件与响应式表单指令，并将在 Angular v7 中删除。

所以你应该使用FormControl并在你的情况下使用setValue链接方法：

ngOnInit() {
    this.pokemonControl.setValue(this.selected);
  }

Answer 3

你缺的是function对比。Angular根本就不知道select怎么样。 根据文档compareWith - Function 将选项值与选定值进行比较。 第一个参数是来自选项的值。 第二个是来自选择的值。 应返回 boolean。 文档链接

所以关于你的实施HTML

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl" [compareWith]="compareWith">
     <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                              [disabled]="group.disabled">
       <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
                    {{pokemon.viewValue}}
       </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

TS

ngOnInit() {
    this.pokemonControl.setValue(this.selected);
  }

compareWith = (a: unknown, b: unknown): boolean => {
    return a == b;
  };

附言。 如果您的选项值为 object，那么您可以简单地创建一个更复杂的比较器来显示值。

在您的情况下：为了将此类复杂对象与数组类型进行比较，我将通过对 object 进行字符串化来实现生活黑客解决方案。简单高效。

compareWith = (a: YourType, b: YourType): boolean => {
    if (!a || !b) return false;
    return JSON.stringify(a) === JSON.stringify(b);
  };