在 Angular 4 中注册点击事件和动画

Question

当我单击手风琴列表中的一个元素时，所有元素都会展开。我只想打开 header 被点击的卡片。

plnkr link here

app.component.html

        <div id="accordion" *ngIf="res">
            <div class="card" *ngFor="let r of res;let i=index">
                <div class="card-header">
                    <h5 class="mb-0">
                        <button class="btn btn-link" 
                        (click)="toggleShowDiv(i)">
                            Collapsible Group Item #1
                        </button>
                    </h5>
                </div>

                <div id="a{{i}}" [@slideInOut]="animationState">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                               dnf ksdfkg skdfgk sd mkdfdm
                               d kmfsd mdksm dk mdf
                               d kdm kd kdsmfk sd
                                sdfsdkg sdkm gdkg dk
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

app.component.ts

import { Component, OnInit, ElementRef } from '@angular/core';
import { SlideInOutAnimation } from './animation';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
animations: [SlideInOutAnimation]
})

export class AppComponent implements OnInit {
res = [1, 2, 3, 4];
animationState = 'out';
constructor(private el: ElementRef) {}
ngOnInit() {

}
toggleShowDiv(id) {
    this.animationState = this.animationState === 'out' ? 'in' : 
 'out';
  }
}

如何设置卡片 body 在被点击时展开的动画？

Answer 1

问题是您正在使用 *ngFor 循环生成列表的所有四个元素，并在 all[=31= 上应用 one click 操作] 其中。您必须正确获取可折叠元素的 id 并仅在该元素上应用动画 。

这是一个解决方案。

app.component.ts

import { Component, OnInit, ElementRef } from '@angular/core';
import { SlideInOutAnimation } from './animation';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    animations: [SlideInOutAnimation]
})

export class AppComponent implements OnInit {

    modelsList: { id: number, header: string, text: string, animationState: string }[] = [
        { "id": 0, "header": "Some header", "text": "Some text", "animationState": "out" },
        { "id": 1, "header": "Some header", "text": "Some text", "animationState": "out" },
        { "id": 2, "header": "Some header", "text": "Some text", "animationState": "out" },
        { "id": 3, "header": "Some header", "text": "Some text", "animationState": "out" }
    ]; 

    constructor(private el: ElementRef) {}
    ngOnInit() {

    }
    toggleShowDiv(id) {
        this.modelsList[id].animationState = this.modelsList[id].animationState === "out" ? 'in' : "out";
      }
      objectKeys(obj) {
        return Object.keys(obj);
    }
}

app.component.html

<div class="container">
 <div class="row">
    <div class="col">
        <div id="accordion" *ngIf="modelsList">
            <div class="card" *ngFor="let key of objectKeys(modelsList); let i=index" >
                <div class="card-header">
                    <h5 class="mb-0">
                        <button class="btn btn-link" (click)="toggleShowDiv(i)">
                                {{modelsList[i].header}}
                        </button>
                    </h5>
                </div>

                <div id="a{{i}}" [@slideInOut]="modelsList[i].animationState">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                   {{modelsList[i].text}}
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
</div>

手风琴列表的文本和 headers 已移至 TS 代码，这样可以更轻松地应用 element-wise 操作。 HTML 也可能有一种方法可以做到这一点，但我还没有研究过。