更改类名时 matInput 格式的格式更改

Posted 2023-03-13

【中文标题】更改类名时 matInput 格式的格式更改

【英文标题】：Formatting of matInput formatting changes when changing class name

【发布时间】：2020-03-19 03:22:23

【问题描述】：

当我尝试使用“”将 matInput 的类设置为一个值时，它会出于某种原因更改格式。这是带有花括号的代码加上它 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>

如果我将类名更改为其他名称，它会正常显示。 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>

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

【参考方案1】：

你试过了吗

[ngClass]=" name.index : true "

参考ngClass

【参考方案2】：

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

【讨论】：

在 Angular10 中得到确认。尴尬的行为。