Javascript 角度*ngFor"；id"；使用“mat”按钮切换生成的标记不正确`

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

<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>

---

因此，基本上我希望按钮显示

displayName

（这可以工作）并具有对象中的id。后一种情况不会发生，但相反，按钮的id类似于

100按钮

和

200按钮

，而不是

100

和

200

。这是为什么？我如何使Id为

100

和

200

，而不是

100按钮

和

200按钮

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

{{button.displayName}}

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

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

如果要覆盖（或更好地扩展）角度材质中的默认按钮id，则必须传入id。（）

您将在组件内获得您的id：

...

谢谢，但这并没有解决问题-它仍然是作为

100按钮

等生成的。toggle

{{button.id}}

中的id输出工作正常，它输出为

100

200

等。但是如果我将它分配给id，它添加了

-button

。这会导致按钮获得id，如

id=“mat-button-toggle-0-button”

可能是

id

属性的值。如果你把

{{button | json}}

放在循环中-你会看到什么？我不知道怎么做-你是说

{{button.displayName}

`作为另一个元素。例如，将其粘贴到

旁边。你必须在应用程序的某个地方添加

-button

。我不是，但

mat button toggle

可能…是的，这就是我正在做的，但我不希望组件有

100 button

，只是

100

。我不知道你的答案是如何解决这个问题的。@lte\uuuuuu你的组件是什么？还是+？

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

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