帶有* 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的角度動畫

回答

相關問題