angular - ng2-bootstrap 手风琴如何创建交互式下拉箭头

Question

我有以下手风琴：

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

标记看起来像这样，注意(click)="toggleAssignedTasks()"手风琴div标题与此我 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;
}

Answer 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;
    }

}

Answer 2

为什么不使用标准group?.isOpen方法，如下所述：