javascript - 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 而不是 100 和 200。为什么会这样，我怎样才能使 ID 为 100 和 200 而不是 100-button 和 200-button?

Answer 1

如果您想覆盖(或更好地扩展) 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>