Angular Material 动态绑定按钮类型

Question

我在我的项目中使用 Angular Material。我想根据变量动态设置按钮类型。我尝试了类似以下的操作：

export class ButtonComponent {
  type: 'simple' | 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' = 'simple";
}

在 HTML 中

<button [mat-button]="type === 'simple'" [mat-raised-button]="type === 'raised'">
  Text goes here 
</button>

但我收到以下错误：

无法绑定到“mat-button”，因为它不是“button”的已知属性

虽然我已经在我的 module.ts 中导入了 MatButtonModule

感谢您抽出宝贵的时间，并提前感谢大家。

Answer 1

您需要将MatButtonModule导入到包含您的组件的模块中：

import {MatButtonModule} from '@angular/material/button';

那么如果你想动态应用元素属性，你可以这样做：

<button [attr['mat-button']]="type === 'simple' ? '' : null">
  Text goes here 
</button>