我怎样才能在一张material2 angular2卡片中翻转一张卡片

Question

我正在尝试创建一个卡片列表，我可以使用material2和angular分别翻转每个卡片。问题是，当我尝试翻转一张卡时，列表中的所有卡都被翻转。我已尝试使用相同结果的不同版本的代码...

倒装卡component.html

<div class="tp-wrapper">


  <md-list-item class="tp-list" *ngFor="let  upcomingEvent of upcomingEvents">
   <!-- <md-card [ngClass]="'event-item'">  -->   

    <div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
    <!-- <md-card> -->
      <div class="tp-box__side tp-box__front"> 
     <!--  <md-card [ngClass]="'event-item'"> -->
        <h4 [ngClass]="'event-title'" [ngStyle]="{'color':'purple'}"> {{upcomingEvent.title}}</h4>
     <!--  </md-card> -->
      </div> 
      <div class="tp-box__side tp-box__back">Back
      </div>
      <!-- </md-card> -->
     </div>

   <!--  </md-card>  -->

  </md-list-item>


 </div>

倒装卡component.ts

import { Component, Input, OnInit } from '@angular/core';
import { UpcomingEvent } from './../../interface/upcomingevent';

import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';
@Component({
  selector: 'app-flip-card',
  templateUrl: './flip-card.component.html',
  styleUrls: ['./flip-card.component.css'],
  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 FlipCardComponent implements OnInit {
   @Input()
    upcomingEvents: Array<UpcomingEvent>;
   @Input()
     selectedEvent: UpcomingEvent;

    flip: string = 'inactive';

  constructor() { }

  ngOnInit() {
  }

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

这可以吗？换句话说，我希望我的列表显示多个垂直滚动卡片，当我碰到它时，它会翻转......任何想法都会受到赞赏。