默认情况下，使用 FormControl 选择所有/多个 mat-select 对象答案

【问题标题】：Select all/multiple mat-select objects by default with FormControl默认情况下，使用 FormControl 选择所有/多个 mat-select 对象
【发布时间】：2021-07-29 05:33:44
【问题描述】：

我知道要将 mat-select 默认设置为某些值，您需要创建一个数组并将 FormControl 的值设置为该数组。但是，我无法让它适用于更复杂的对象，如下所示：

public formGroupCarForm: FormGroup;
public formBuilder: FormBuilder;

allCars: Car[] [
    { id: 1, name: "Honda Accord", year: "1995" },
    { id: 2, name: "Toyota Camry", year: "1999" },
    { id: 3, name: "Audi A6", year: "2011" }
];

constructor() {
    this.setDropdowns();
}

public setDropdowns() {
    allCarsFilter: Car[] = this.allCars;
    allCarsFilter = [...allCarsFilter, { id: 0, name: "All", year: "0000" }];
    this.formGroupCarForm = this.formBuilder.group({
        carFilter: new FormControl(allCarsFilter);  // This doesn't work
    });
}

我还有以下 HTML，它有一个硬编码的“全部”选项：

<form [formGroup]="formGroupCarForm">
    <mat-form-field class="filter-field" appearance="outline">
        <mat-select multiple floatLabel="always" formControlName="carFilter">
            <mat-option (click)="toggleAllSelection()" #toggleCar value="">All</mat-option> <!-- I also don't know what to put for the value here??? -->
            <mat-option *ngFor="let car of allCars" [value]="car.id">{{ car.name + ' - ' + car.year }}</mat-option>
        </mat-select>
    </mat-form-field>
</form>

我想选择所有值，包括默认的“全部”选项。我真的希望carFilter: new FormControl(allCars); 行至少会选择ngFor mat-options，但它们没有被选中。我让它适用于其他下拉列表，但这些下拉列表基于更原始的数据类型，如数字和字符串。我将如何为这样的对象执行此操作？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我觉得自己很傻……我知道为什么它不起作用了。我必须修改 HTML，以便该值实际上是 Car 对象，而不是属性。我还必须为 All 过滤器选项创建一个单独的 Car 对象，而不是在 setDropdowns() 方法中即时实例化它。我在我的代码中将其称为 allCarsOption，并在我的 HTML 中执行了以下操作：

<form [formGroup]="formGroupCarForm">
    <mat-form-field class="filter-field" appearance="outline">
        <mat-select multiple floatLabel="always" formControlName="carFilter">
            <mat-option (click)="toggleAllSelection()" #toggleCar [value]="allCarsOption">All</mat-option>
            <mat-option *ngFor="let car of allCars" [value]="car">{{ car.name + ' - ' + car.year }}</mat-option>
        </mat-select>
    </mat-form-field>
</form>

【讨论】：