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 （不是重大更改，所以放松）。

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

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

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

1 个答案: