Angular *ngFor "id" 标签生成不正确，`mat-button-toggle`

Question

我正在尝试从数组生成按钮列表：

<div class="card-container">
    <mat-button-toggle *ngFor="let button of buttonsFromApi" id={{button.id}} class="problemButton" [disabled]="sso.invalid" >{{button.id}}</mat-button-toggle>
</div>

buttonsFromApi 包含 5 个对象，例如：

{
    displayName: "Button name", 
    id: "100",
}

所以基本上我希望按钮显示 displayName（这有效）并具有对象中的 ID。后者不会发生，而是按钮具有 100-button 和 200-button 之类的 id，而不是 100 和 200。为什么会这样，我怎样才能使 ID 为 100 和 200 而不是 100-button 和 200-button？

Answer 1

ID 应该用引号括起来

<div *ngFor="let button of buttonsFromApi" id="{{button.id}}">
  <mat-button-toggle>{{button.displayName}}</mat-button-toggle>
</div>

Answer 2

使用带方括号的属性绑定：

<div *ngFor="let button of buttonsFromApi" [attr.id]="button.id">

Answer 3

如果您想覆盖（或更好地扩展）angular material 中的默认按钮 ID，您必须传入该 ID。 (https://material.angular.io/components/button-toggle/api#MatButtonToggle)

<div>
  <mat-button-toggle id="test-123" value="right" aria-label="Text align right"></mat-button-toggle>
</div>

您将在组件中获得您的 ID：

<mat-button-toggle ... id="test-123">
  <button class="mat-button-toggle-button" type="button" id="test-123-button" tabindex="0" aria-pressed="false" aria-label="Text align right">
<div class="mat-button-toggle-label-content"></div>
</button>
...
</mat-button-toggle>

Angular *ngFor "id" 标签生成不正确，`mat-button-toggle`

Angular *ngFor "id" tag generation incorrect with `mat-button-toggle`

javascript

angular

ngfor