angular - 将 html 添加到 mat-optgroup 标签

Question

Angular Material 是否可以为自动完成组件的 optgroup 的标签提供 HTML 模板，而不是将字符串绑定到label输入？该label属性转义任何 HTML 标记。

标签： angularangular-material

Answer 1

我玩了一点，看起来你可以做到，你只需要删除 [label]输入值并将你的自定义模板放在里面<mat-optgroup>：

<mat-autocomplete #autoGroup="matAutocomplete">
        <mat-optgroup *ngFor="let group of stateGroupOptions | async">
          <!-- here i put my custom button instead of label --->
          <button mat-raised-button color="primary">{{group.letter}}</button>
          <mat-option *ngFor="let name of group.names" [value]="name">
            {{name}}
          </mat-option>
      </mat-optgroup>
</mat-autocomplete>

stackblitz的示例（我放置了按钮而不是普通标签）。希望有帮助。