如何根据 Angular 中的表单控件值有条件地渲染 mat-select 中的 multiple 属性？

Question

我的 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 属性也不起作用，

Answer 1

在修改

multiple

属性之前，我们必须创建然后销毁元素，因为 Angular 给了我以下错误！

ERROR 错误：初始化后无法更改选择的

multiple

模式。

  toggleMultiple() {
    this.toggleSelect = false;
    setTimeout(() => {
      this.multiple = !this.multiple;
      this.toggleSelect = true;
    });
  }

完整代码：

TS：

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;
    });
  }
}

HTML：

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

Stackblitz 演示