动态添加和移除角5材料属性“multiple”

Question

在这里，我可能缺少一些基本的内容，但我正在使用mat按钮切换组，并且希望能够将其用作单选按钮或复选框，具体取决于应用程序状态(即单选按钮)：

<mat-button-toggle-group>

和复选框：

<mat-button-toggle-group multiple>

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

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

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

Answer 1

这不是一个属性。它是mat-button-toggle-group组件中的一个角指令。因此，不可能使用attr.multiple动态添加多个

你必须使用两个垫子组，就像这样：

<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组件的源代码，就不能简单地添加它(而且它仍然只是一个黑客)。这是个不幸的消息..。

但是无论如何，您可以创建2个mat组，而不是显示其中的一个，这取决于您的test变量。并保存它的状态，如果它需要本地变量。

Answer 3

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

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

这里你是 stackblitz

不幸的是，我试过这个角度的材料，但它不起作用。它们不支持此属性作为表达式。也许他们决定只以以下方式支持它：<mat-button-toggle-group multiple>。

这是github上的代码。显然是指令选择器中的攻击。

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