Question

我知道要将 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); 行至少会选择 ngFormat-options，但它们没有被选中。不过，我让它适用于其他下拉菜单，但这些下拉菜单基于更原始的数据类型，如数字和字符串。我将如何为这样的对象执行此操作？

Answer 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>

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

1 个答案: