Question

我可能错过了一些基本的东西，但我正在使用mat-button-toggle-group并希望能够将其用作单选按钮或复选框，具体取决于应用程序状态，即单选按钮：

<mat-button-toggle-group>

和复选框：

<mat-button-toggle-group multiple>

通常，我会添加和删除标签的属性，如下所示：

<mat-button-toggle-group [attr.multiple]="test ? multiple:null">

..但这似乎不起作用。有什么想法吗？

Answer 1

它不是属性。它是 mat-button-toggle-group 组件中的Angular指令。因此，无法使用 [attr.multiple] 动态添加多个

你必须使用两个带有* ngIf的垫子组：

<mat-button-toggle-group *ngIf="test" multiple></mat-button-toggle-group>
<mat-button-toggle-group *ngIf="!test"></mat-button-toggle-group>

Answer 2

由于multiple不是一个属性，而是一个指令，你不能在不访问underliyng组件的源代码的情况下添加它（并且它仍然只是一个hack）。这是个悲伤的消息..

但是无论如何你可以根据你的test变量创建2个席子组而不是显示1个席子组。并保存状态，如果它需要本地可变量。

Answer 3

multiple是<select>的原生布尔属性。因此，只有使用本机选择，您才能执行以下操作：

<select [multiple]="!!yourExpression">

此处您是stackblitz

不幸的是，我在有角度的材料上试过这个并且它不起作用。它们不支持将此属性作为表达式。也许他们决定只通过以下方式支持它：<mat-button-toggle-group multiple>。
这是github上的code。显然是指令选择器中的attr。

PD：@Pterrat awnser可以做你想做的事。

Answer 4

我正在尝试使用mat-select（角度材料7）做类似的事情，至少对于mat-select来说，这是可行的（其中，multiple是类的布尔属性）：

 <mat-select [(value)]="value"
              [multiple]="multiple">
    <mat-option *ngFor="let option of options"
                [value]="option">{{option}}</mat-option>
  </mat-select>

动态添加和删除Angular 5 Material属性'multiple'

4 个答案: