Angular2 Animations: переключение триггеров состояния на каждом *ng, а не на том, на который нажали

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
}

РЕДАКТИРОВАТЬ:

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

** ДЕМО: 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'; 
    }
}

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