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()"

但随后动画完全停止工作。希望有任何帮助指出我哪里出错了。

4

1 回答 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
}

编辑：

您正在使用 anarray但为了执行此任务，您需要使用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'; 
    }
}

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

于 2017-02-01T10:02:21.543 回答