更改 class 名称时 matInput 格式的格式更改

Question

当我尝试使用“{{}}”将 matInput 的 class 设置为一个值时，它出于某种原因更改了格式。这是带有花括号的代码加上它的内容 looks喜欢。

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

如果我将 class 名称更改为其他名称，它会正常显示。 Here's 长什么样，还有代码：

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

使用大括号时如何防止这种情况发生？我的应用程序的任何其他部分都没有发生此问题。

Answer 1

你试过了吗

[ngClass]="{ name.index : true }"

参考ngClass

Answer 2

似乎当您使用 {{}} 指定 class 时，它会覆盖默认的 "mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored"。我可以通过更改 ID 来解决格式问题。

更改 class 名称时 matInput 格式的格式更改

Formatting of matInput formatting changes when changing class name

css

angular

angular-material

mat-input