Angular 2 Click + ngClass，如何仅应用于 SELF 而不是 ngFor 中的所有元素

Question

在 Angular 1.x 中 以下代码可以在我想要单击并翻转 ng-repeat 中的卡片时工作

<div class="card" ng-repeat="let card of cards">
<div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped">
</div>
</div>

但是在 Angular 2 中 单击时，它会翻转 ngFor 循环内的每个“卡片”...如何仅将 ngClass 条件绑定到元素本身？

<div class="card" *ngFor="let card of cards">
<div class="flipcard"  [ngClass]="{'flipped': isflipped }" (click)="isflipped = !isflipped;">
</div>
</div>

Answer 1

改成：

<div class="card" *ngFor="let card of cards">
    <div class="flipcard"  [ngClass]="{'flipped': card.isflipped }" (click)="card.isflipped = !card.isflipped;">
    </div>
</div>

Answer 2

为什么它可以与 AngularJS (1.x) 一起使用？

ng-repeat为每个被迭代的元素创建一个新的作用域，所以isFlipped属性被设置在被迭代的元素作用域上（每个元素唯一）：

ngRepeat

ngRepeat 指令为集合中的每个项目实例化一次模板。每个模板实例都有自己的范围，其中给定的循环变量设置为当前集合项，$index 设置为项索引或键。

为什么它不能与 Angular (2+) 一起使用？

Angular 不再有作用域，因此当您设置 isFlipped 属性时，它位于当前组件上，与迭代元素无关。

如果card 元素是对象：

对于您的特定情况，似乎每张卡片都是一个对象，因此您可以像@Harry Ninh 所建议的那样，向每个card 元素添加一个属性isFlipped。 考虑在定义card元素的类或接口中声明此属性否则AOT编译可能会失败。

如果您不想在类/接口中添加上下文属性，请参阅“如果可以有多个翻转卡片 (...)”部分。

如果只能翻转一张卡片：

如果你只能有一张翻转卡片，你可以在你的组件中添加一个属性currentCard，并将迭代的卡片与你模板中的当前卡片进行比较：

组件：

export class MyComponent{
    // (...)
    currentCard:Card;
    // (...)
}

模板：

<div class="card" *ngFor="let card of cards">
    <div class="flipcard"  [ngClass]="{'flipped': card===currentCard }" (click)="currentCard = card">
    </div>
</div>

如果可以有不止一张翻转卡片并且card元素不是对象或者可以为空。

在这种情况下，您需要保持每个项目的已翻转/未翻转状态，例如使用布尔数组或具有 card 值作为键和布尔值的对象

组件：

export class MyComponent{

    // (...)

    cards: Card=[];
    private flipped: boolean[];

    flip(index:number){
      this.flipped[index]=!this.flipped[index]
    }

    // (...)

}

模板：

<div class="card" *ngFor="let card of cards: let i= index">
    <div class="flipcard"  [ngClass]="{'flipped': flipped[i] }" (click)="flip(i)">
    </div>
</div>