带有* ngFor的角度动画

我有我的物品清单，我想一次触发一个物品的状态。 http://plnkr.co/edit/WGLbs2gl7zSxGymOSm0y?p=preview 带有* ngFor的角度动画

点击时我只想点击项目来获得状态，如果状态是'关闭'它不应该显示。

import { Http } from '@angular/http'; 
 
import { 
 
    animate, 
 
    Component, 
 
    keyframes, 
 
    state, 
 
    style, 
 
    transition, 
 
    trigger, 
 
} from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'card-overview-example', 
 
    templateUrl: 'card-overview-example.html', 
 
    animations: [ 
 
    trigger('state', [ 
 
     state('open', 
 
     style({ 
 
      opacity: 1 
 
     })), 
 
     transition('* => open', [ 
 
     animate(200, keyframes([ 
 
      style({ 
 
      opacity: 1 
 
      }), 
 
     ])), 
 
     ]), 
 
     state('closed', 
 
     style({ 
 
      opacity: 0 
 
     }) 
 
    ), 
 
    ]) 
 
    ] 
 
}) 
 
export class CardOverviewExample { 
 
    items = []; 
 
    state; 
 
    constructor(private http: Http) { 
 
    this.getData().subscribe(items => this.items = items.results); 
 
    } 
 
    getData() { 
 
    return this.http.get(`https://swapi.co/api/people/?format=json`) 
 
    .map((res:Response) => res.json()); 
 
    } 
 
    showDetails(item) { 
 
    // this.state = (this.state === 'open' ? 'closed' : 'open'); 
 
    this.state = (this.state === 'open' ? 'closed' : 'open'); 
 
    } 
 
}

<md-card *ngFor="let item of items"> 
 
    <md-card-title (click)="showDetails()">{{item.name}}</md-card-title> 
 
    <md-card-content [@state]="closed">state = {{state}} 
 
    <p>{{item.hair_color}}</p> 
 
    <p>{{item.skin_color}}</p> 
 
    <p>{{item.eye_color}}</p> 
 
    </md-card-content> 
 
</md-card>

来源

2017-07-03 Mackelito

或多或少想通了通过将项目和有状态上的项目... http://plnkr.co/edit/QhArVlfFGIsXjx5QSLcX?p=preview

(click)="showDetails(item)"

希望它可以帮助别人:)

来源

2017-07-04 12:29:23 Mackelito

我有类似的问题。当我点击div中的一个项目时，它们全部被激活。我有一个问题，你在哪里分配项目有状态？基本上为什么你可以使用item.state？ – Vato

带有* ngFor的角度动画

回答

相关问题