Html [class.selected]做什么？

我正在努力学习angular 6，我遇到了一行我认为没有很好解释的代码。当从代码中删除它时，它不会产生任何显著的变化，但我一直在关注它。请澄清以下代码行在此html文件中的作用

[class.selected]="atype === selectedType"

完整html代码：

<h2>My Types</h2>
<ul class="types">
  <!-- Create the for loop, and then assign the selected element to the current type. -->
  <li *ngFor="let atype of types"
    [class.selected]="atype === selectedType"
    (click)="onSelect(atype)">
    <span class="badge">{{atype.id}}</span> {{atype.name}}
  </li>
</ul>

<div *ngIf="selectedType">

  <h2>{{selectedType.name | uppercase}} Details</h2>
  <div>
    <span>id: </span>{{selectedType.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedType.name" placeholder="name">
    </label>
  </div>

</div>

我的类型


{{atype.id}{{atype.name}


{{selectedType.name |大写}}详细信息
id:{{selectedType.id}
姓名：

类型引用数组

[class.selected]="atype === selectedType"

在这里，将首先计算条件，即

atype===selectedType

，如果结果为

true

，则

所选css类将应用于讨论中的元素，即

这也可以用另一种方式书写：

[ngClass]="{'selected': atype === selectedType}"

这仍然可以达到同样的效果。同样的解释也适用于
[style.someStyleProperty]=“atype===selectedType”
和[ngStyle]

希望这有帮助

在这里，将首先计算条件，即
atype===selectedType
，如果结果为
true
，则
所选css类将应用于讨论中的元素，即

这也可以用另一种方式书写：

[ngClass]="{'selected': atype === selectedType}"

这仍然可以达到同样的效果。同样的解释也适用于
[style.someStyleProperty]=“atype===selectedType”
和[ngStyle]

希望这能有所帮助。
的可能副本