4

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

2 回答 2

5

将其更改为：

<div class="card" *ngFor="let card of cards">
    <div class="flipcard"  [ngClass]="{'flipped': card.isflipped }" (click)="card.isflipped = !card.isflipped;">
    </div>
</div>
于 2016-07-25T10:16:31.233 回答
3

为什么它适用于 AngularJS (1.x) ？

ng-repeat为每个迭代元素创建一个新范围，因此在isFlipped迭代元素范围上设置属性（每个元素唯一）：

重复

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

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

Angular 不再有作用域，因此当您设置isFlipped属性时，它位于当前组件上，而不是与迭代元素相关的任何内容。

如果card元素是 Objects ：

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

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

如果只能翻转一张卡片：

如果您只能有一张翻转卡片，您可以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>
于 2017-09-18T07:59:05.123 回答