Angular2 Animations: Toggle State Triggers on Every * ngFor, а не один щелчок

Question

Я делаю несколько расширяемых панелей, используя Angular2 и Material Design Lite. Я следил за учебником на сайте Angular2, но при нажатии одной панели открывается панель расширения для каждого элемента.

Это мой код:

animations: [ 
trigger('focusPanel', [ 
    state('inactive', style({ 
    backgroundColor: '#eee', 
    height: '100px' 

    })), 
    state('active', style({ 
    backgroundColor: '#cfd8dc', 
    height: '200px' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
])] 


export class AppComponent implements OnInit { 

issues: Issue[]; 
selectedIssue: Issue; 

state: string = 'inactive'; 

toggleMove() { 
    this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
} 

И HTML

<div class="demo-card-wide mdl-card mdl-shadow--2dp" *ngFor = "let issue of testIssues"> 
     <div class="mdl-card__title mdl-card--border"> 
     <h2 class="mdl-card__title-text">{{issue}}</h2> 
     </div> 
     <div class="mdl-card__supporting-text" [@focusPanel]='state'> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Mauris sagittis pellentesque lacus eleifend lacinia... 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Mauris sagittis pellentesque lacus eleifend lacinia... 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Mauris sagittis pellentesque lacus eleifend lacinia... 
     </div>   
     <div class="mdl-card__menu"> 

      <!-- Click to Expand Panel --> 
     <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" (click)="toggleMove()"> 
      <i class="material-icons">arrow_drop_down</i> 
     </button> 

Я попытался изменить разметку на HTML для

<div class="mdl-card__supporting-text" [@focusPanel]='issue.state'> 

И кнопка переключения на

(click)="issue.toggleMove()" 

Но тогда анимация перестает работать полностью. Был бы признателен за любую помощь в том, чтобы указать, где я ошибаюсь.

Answer 1

<div class="mdl-card__supporting-text" [@focusPanel]='issue.state'> 

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" 
     (click)="toggleMove(issue.state)">  //<<===modified 


toggleMove(newState) { 
    newState = (newState === 'inactive' ? 'active' : 'inactive'); 
               //<<<===modified 
} 

EDIT:

Вы используете array, но для того, чтобы выполнить эту задачу, вам нужно работать с array of objects (не значительные изменения так расслабить).

** DEMO: https://plnkr.co/edit/SHalqpxLPYCjPxhixueI?p=preview

Я изменил следующие вещи и стрелы,

<h2 class="mdl-card__title-text">{{issue.month}}</h2> 

<div class="mdl-card__supporting-text" [@focusPanel]="issue.state==(undefined || 'active')?'active':'inactive'"> 

<button (click)="toggleMove(issue)"> 

export class App { 
    testIssues = [{month:"January"},{month:"Feb"}]; 
    toggleMove(obj) { 
      obj.state = obj.state === 'active' ? 'inactive' : 'active'; 
    } 
} 

Теперь, Вы можете сделать его более точным!