首页 文章

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

提问于
浏览 次
0

我正在使用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()"

但随后动画完全停止了 . 非常感谢任何帮助，指出我哪里出错了 .

angular angular-material angular2-animation

1 回答

  • 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 （不是一个重大改变，所以放松） .

    **演示：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'; 
    }
}

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

    回复于

相关问题