【问题标题】：ng2-bootstrap accordion how to create interactive dropdown arrowng2-bootstrap 手风琴如何创建交互式下拉箭头
【发布时间】：2016-08-16 23:08:37
【问题描述】：

我有以下手风琴：

我需要箭头在手风琴打开时像这样^，在手风琴关闭时像这样v

标记看起来像这样，请注意 divaccordion-heading 上的 (click)="toggleAssignedTasks()" 我切换分配任务，然后我将 fontawesome 向下箭头的类相应地更改为向上或向上：

 <accordion class="row th-assigned-ready">
        <accordion-group [isOpen]="isAssignedTasksVisible" >
            <div class="th-heading" accordion-heading (click)="toggleAssignedTasks()">
                <strong class="th-text-ready">Ready for Review (2)</strong>
                <i class="fa"
                   [ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}"
                   aria-hidden="true"></i>
            </div>
             ... 
            </accordion-group>
        </accordion>

这是可行的，但是当用户点击手风琴时，事件会变得混乱，似乎（点击）事件正在被手风琴默认事件吸收。

我还尝试在手风琴中使用原生 [showArrows]="true"，如下所示：

但我得到错误：

Promise rejection: Template parse errors:
Can't bind to 'showArrows' since it isn't a known native property ("
            </div>

            <accordion class="row th-assigned-ready" [ERROR ->][showArrows]="true" >
                <accordion-group [isOpen]="isAssignedTasksVisible" >
        "):

更新：

toggleAssignedTasks() 看起来像这样

public toggleAssignedTasks(): void {
    this.isAssignedTasksVisible = (this.isAssignedTasksVisible) ? false : true;
}

【问题讨论】：

你能发布toggleAssignedTasks()函数吗？另外，为什么你在雪佛龙上使用斜体标签？最后，showArrows 不是原生的，因此 Angular 正在寻找 Accordian 组件上不存在的属性，因此出现错误。如果可能，请尝试重现您在 plunker 中看到的效果，这样会更容易有人帮助您找出问题所在。
@AndrewBabin 发布更新谢谢
您能否帮助我们更好地了解到底出了什么问题？一方面，在[ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}" aria-hidden="true"> 中，当isAssignedTasksVisible 为真时应用下雪佛龙类，当它为假时应用上雪佛龙类。这将使您与您正在寻找的相反（当任务可见时您想要 ^ ）。如果isAssignedTasksVisible 有默认值，这可能会抛出toggleAssignedTasks()。
@AndrewBabin，谢谢。好吧，现在发生的事情是，即使我点击手风琴中不是我想要的任何项目，手风琴也会关闭。我只希望它在点击 V 形元素时打开或关闭。
@AndrewBabin 你知道当我点击手风琴标题时如何停止关闭手风琴的事件吗？在我发布的图片中显示“已准备好接受评论 (2)”的灰色部分

标签： angular angular2-template angular2-directives ng2-bootstrap

【解决方案1】：

所以问题是我的手风琴在点击手风琴组时被关闭，所以我通过这样做解决了它：

       <accordion class="row th-assigned-ready" >
            <accordion-group [isOpen]="isAssignedTasksVisible" (click)="onAssignedReadyClick()">
                <div class="th-heading" accordion-heading>
                    <strong class="th-text-ready">Ready for Review (2)</strong>
                    <i class="fa"
                       [ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}"
                       aria-hidden="true"></i>
                </div>
                <ul (click)="stopAccordionClose($event); false">
                  //NOTICE stopAccordionClose
                </ul>
            </accordion-group>
        </accordion>

这就是我的 component.ts 的外观：

@Component({
    moduleId: module.id,
    selector: "task",
    templateUrl: "task.component.html",
    styleUrls: ["task.scss"],
    directives: [
        HeaderInternalComponent,
        ACCORDION_DIRECTIVES,
    ],
})

export class TaskComponent extends MeteorComponent implements OnInit {

    //more code...


    public toggleAssignedTasks(): void {
        this.isAssignedTasksVisible = (this.isAssignedTasksVisible) ? false : true;
    }

    public toggleAssignedNotComplete(): void {
        this.isAssignedNotCompleteVisible = (this.isAssignedNotCompleteVisible) ? false : true;
    }

    public onAssignedReadyClick(): boolean {
        this.toggleAssignedTasks();
        return false;
    }

    public onAssignedNotCompleteClick(): boolean {
        this.toggleAssignedNotComplete();
        return false;
    }

    public stopAccordionClose($event): boolean {
        $event.stopPropagation()
        $event.preventDefault()
        return false;
    }

}

【讨论】：

【解决方案2】：

为什么不使用标准的group?.isOpen 方法，就像描述的here：

【讨论】：