Css 更改类名时，matInput格式会更改

当我尝试使用“{}}”将matInput的类设置为值时，它会出于某种原因更改格式。下面是带大括号的代码，以及它所包含的内容 喜欢

{{name.name}}

如果我将类名更改为其他名称，它将正常显示。它的外观以及代码：

<mat-tab label="1">
  <div *ngFor="let name of playerAndID">
    <h3>{{ name.name }}</h3>
    <mat-form-field class="scoreInput">
      <input matInput placeholder="Score" class="ANYTHING ELSE">
    </mat-form-field>
  </div>
</mat-tab>

{{name.name}}

在使用花括号时，如何防止这种情况发生？此问题不会出现在我的应用程序的任何其他部分。

您尝试过吗

[ngClass]=“{name.index:true}”

---

请参阅

当您使用{{}指定类时，它似乎会覆盖“mat input element mat form field autofill control cdk text field autofill MONITED”的默认值。我可以通过更改Id来解决格式问题。

在Angular10中确认。笨拙的行为。

<mat-tab label="1">
  <div *ngFor="let name of playerAndID">
    <h3>{{ name.name }}</h3>
    <mat-form-field class="scoreInput">
      <input matInput placeholder="Score" class="ANYTHING ELSE">
    </mat-form-field>
  </div>
</mat-tab>