我的 Angular 应用程序中有一个带有 mat-select 元素的表单,该元素应该允许根据条件进行多项选择。具体来说,我想根据表单控件的值有条件地在 mat-select 上包含
multiple
属性。
这是 mat-select 的代码片段:
<mat-select formControlName="queries" [multiple]="ticketForm.get('queryType')?.value === 'Service Request'">
<!-- Your options here -->
</mat-select>
但是,当我尝试使用这种方法时,多个属性未正确呈现。
根据表单控件的值有条件地将 multiple 属性包含在 Angular 中的 mat-select 元素中的正确方法是什么?
我还尝试使用 chatGPT 建议的 Angular 属性绑定
<mat-select
formControlName="queries"
[attr.multiple]="
ticketForm.get('queryType')?.value == 'Service Request' ? true : true
"
>
但是这里的 multiple 属性也不起作用,
在修改
multiple
属性之前,我们必须创建然后销毁元素,因为 Angular 给了我以下错误!
ERROR 错误:初始化后无法更改选择的
模式。multiple
toggleMultiple() {
this.toggleSelect = false;
setTimeout(() => {
this.multiple = !this.multiple;
this.toggleSelect = true;
});
}
import { Component } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { NgIf } from '@angular/common';
/** @title Select with multiple selection */
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
standalone: true,
imports: [
MatFormFieldModule,
MatSelectModule,
FormsModule,
ReactiveFormsModule,
NgIf,
],
})
export class SelectMultipleExample {
multiple = true;
toggleSelect = true;
toppings = new FormControl('');
toppingList: string[] = [
'Extra cheese',
'Mushroom',
'Onion',
'Pepperoni',
'Sausage',
'Tomato',
];
toggleMultiple() {
this.toggleSelect = false;
setTimeout(() => {
this.multiple = !this.multiple;
this.toggleSelect = true;
});
}
}
<mat-form-field *ngIf="toggleSelect">
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" [multiple]="multiple">
@for (topping of toppingList; track topping) {
<mat-option [value]="topping">{{topping}}</mat-option>
}
</mat-select>
</mat-form-field>
<br />
multiple: {{multiple}}<br />
<button (click)="toggleMultiple()">Toggle Multiple</button>