切换内容关闭所有内容

Question

我创建了一个内容切换，非常简单，显示和隐藏内容但是当我按下按钮显示或隐藏所有内容时，不仅仅是按下按钮旁边的内容。当我使用ngFor：|

时，我也有这个问题

如果您想看看，这是Plunker https://plnkr.co/edit/ncAQog?p=preview

谢谢你们的帮助：）

应用程序组件

import {Directive, Input, HostBinding} from 'angular2/core';


@Directive({selector: '[collapse]'})
export class Collapse {
    // style
    @HostBinding('style.height')
    private height:string;
    // shown
    @HostBinding('class.in')
    @HostBinding('attr.aria-expanded')
    private isExpanded:boolean = true;
    // hidden
    @HostBinding('attr.aria-hidden')
    private isCollapsed:boolean = false;
    // stale state
    @HostBinding('class.collapse')
    private isCollapse:boolean = true;
    // animation state
    @HostBinding('class.collapsing')
    private isCollapsing:boolean = false;

    @Input()
    private set collapse(value:boolean) {
        this.isExpanded = value;
        this.toggle();
    }

    private get collapse():boolean {
        return this.isExpanded;
    }

    constructor() {
    }

    toggle() {
        if (this.isExpanded) {
            this.hide();
        } else {
            this.show();
        }
    }

    hide() {
        this.isCollapse = false;
        this.isCollapsing = true;

        this.isExpanded = false;
        this.isCollapsed = true;
        setTimeout(() => {
            this.height = '0';
            this.isCollapse = true;
            this.isCollapsing = false;
        }, 4);
    }

    show() {
        this.isCollapse = false;
        this.isCollapsing = true;

        this.isExpanded = true;
        this.isCollapsed = false;
        setTimeout(() => {
            this.height = 'auto';

            this.isCollapse = true;
            this.isCollapsing = false;
        }, 4);
    }
}

组件切换示例

import {Component} from 'angular2/core';
import {Collapse} from './collapse.component';

/*Angular 2 Collapse Example*/
@Component({
    selector: 'my-app', 
    template:`
                <h3>Angular 2 Collapse HTML Content</h3>
                <button type="button" class="btn btn-primary"
                        (click)="isCollapsedContent = !isCollapsedContent">Show / Hide Content (Toggle collapse)
                </button>
                <hr>
                <div [collapse]="isCollapsedContent" class="card card-block card-header">
                  <div class="well well-lg">
                   HTML content goes here !
                   <b>bold text</b> <br>
                   <span>this is a collapse example</span>
                  </div>
                </div>
                <h3>Angular 2 Collapse HTML Content</h3>
                <button type="button" class="btn btn-primary"
                        (click)="isCollapsedContent = !isCollapsedContent">Show / Hide Content (Toggle collapse)
                </button>
                <hr>
                <div [collapse]="isCollapsedContent" class="card card-block card-header">
                  <div class="well well-lg">
                   HTML content goes here !
                   <b>bold text</b> <br>
                   <span>this is a collapse example</span>
                  </div>
                </div>



             `,
    directives: [Collapse],
})
export class Angular2Collapse  {
    //collapse content
    public isCollapsedContent:boolean = false;
    //collapse image (example)
    public isCollapsedImage:boolean = true;

}

Answer 1

不确定我是否完全理解了目标，但这里有适合你的东西。

为了保持多个项目的状态（展开/折叠），您需要一组状态。每个按钮都应与相应的可折叠部分相关联。

你也有太多的状态，一个isExpanded就足够了：

isExpanded: Array[boolean];

实际上，我建议您阅读本教程：http://blog.thoughtram.io/angular/2015/03/27/building-a-zippy-component-in-angular-2.html

它显示了一个名为 Zippy

的类似组件的开发

Answer 2

您可以尝试为您的按钮提供[（ngModel）] =“togglBtnVal”，并根据按钮点击为要隐藏/显示的元素提供与* ngIf =“togglBtnVal”相同的ngModel。