Angular4のコンポーネントの配列内の1つのコンポーネントをアニメーション化する

Question

Angularの新機能で、コンポーネントの配列内の単一のコンポーネント（カード）にフリップをアニメーション化しようとしています。

私はアレイに10枚のカードを持っています。これまでのところ私はコードを持っているので、カードのいずれかがクリックされたときに、それらはすべてフリップします。しかし、私はちょうどクリックされたカードが反転したいです。ここで

@Component({ 
    selector: 'app-card', 
    templateUrl: './card.component.html', 
    styleUrls: ['./card.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    animations: [ 
    trigger('flipState', [ 
     state('active', style({ 
     transform: 'rotateY(179.9deg)' 
     })), 
     state('inactive', style({ 
     transform: 'rotateY(0)' 
     })), 
     transition('active => inactive', animate('500ms ease-out')), 
     transition('inactive => active', animate('500ms ease-in')) 
    ]) 
    ] 
}) 
export class CardComponent { 
    @Input() data: Person[]; 

    flip: string = 'inactive'; 

    toggleFlip() { 
    this.flip = (this.flip == 'inactive') ? 'active' : 'inactive'; 
    } 
} 

はHTMLです：：

<div *ngFor="let p of data" (click)="toggleFlip()" [@flipState]="flip"> 
    <div class="card__inner"> 
     {{ p.name }} 
     <h3>{{ p.age }}</h3> 
     {{ p.jobTitle }} 
    </div> 
    </div> 

私がクリックされたカードを特定し、フリップ「の状態を変更する方法を見つける必要があるだろうと考えた。ここ

は、カードのコンポーネントです"そのカードだけではなく、私はこれについてどうやって行くのか、それとも最善のアプローチであればわかりません。

ご協力いただきありがとうございます。

おかげ

Answer 1

は、アニメーションのトリガーは、すべてのリスト項目に追加する必要があることが判明します。