Angular2 动画：在每个 *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
}

编辑:

您正在使用 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'; 
    }
}

现在，您可以让它更准确！

Angular2 动画：在每个 *ngFor 而不是单击时切换状态触发器

Angular2 Animations: Toggle State Triggers on Every *ngFor Rather Than The One Clicked

angular

angular-material

angular2-animation