以编程方式设置<mat-select>的值

Question

我正在尝试设置2个字段值<input matInput>abnd <mat-select>编程.对于文本输入,一切都按预期工作,但是对于<mat-select>视图,这个字段就像它有价值一样null.但是,如果我打电话,console.log(productForm.controls['category'].value它会打印出我以编程方式设置的正确值.我错过了什么吗？

这是代码:

表单配置:

productForm = new FormGroup({
        name: new FormControl('', [
            Validators.required
        ]),
        category: new FormControl('', [
            Validators.required
        ]),
    });

设定值:

ngOnInit() {
        this.productForm.controls['name'].setValue(this.product.name);
        this.productForm.controls['category'].setValue(this.product.category);
    }
}

HTML:

<mat-form-field>
    <mat-select [formControlName]="'category'"
                [errorStateMatcher]="errorStateMatcher">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

Answer 1

通过将<mat-option>from category对象的值更改为其id来解决此问题.

<mat-form-field>
<mat-select [formControlName]="'category'"
        [errorStateMatcher]="errorStateMatcher">
<mat-option *ngFor="let category of categories" [value]="category.id">
    {{category.name}}
</mat-option>
</mat-select>
</mat-form-field>

和设定值:

this.productForm.controls['category'].setValue(this.product.category.id);

Answer 2

Angular mat-select 通过该对象与.NET中所有可用对象之间的引用进行比较mat-select。结果，它无法选择您在类别字段中设置的项目。因此，你必须实现比较功能来比较的任何列表项的属性，只要你想，然后通过此功能可将[compareWith]属性的mat-select。
最后，这是最终标记和脚本的快照：

<mat-form-field>
<mat-select [formControlName]="category" [compareWith]="compareCategoryObjects">
    <mat-option *ngFor="let category of categories" [value]="category">
        {{category.name}}
    </mat-option>
</mat-select>

并在组件类中：

compareCategoryObjects(object1: any, object2: any) {
        return object1 && object2 && object1.id == object2.id;
    }

现在它将选择项目-如果您为该字段设置了多个选择，则将选择项目。

参考：https :
//github.com/angular/material2/issues/10214

工作样本：https :
//stackblitz.com/edit/angular-material2-issue-t8rp7j

Answer 3

您可以使用对象来实现此目的的方法是更改​​标记，如下所示：

<mat-select [formControlName]="'category'"
        [errorStateMatcher]="errorStateMatcher" [compareWith]="compareFn">
<mat-option *ngFor="let category of categories" [value]="category">
    {{category.name}}
</mat-option>
</mat-select>

然后在组件中

compareFn(x: Category, y: Category): boolean {
return x && y ? x.id === y.id : x === y;
}