更新：

Question

我有以下手风琴：

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

标记看起来像这样，注意(click)="toggleAssignedTasks()"手风琴上的div - 标题为此I 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方法，如here所述：

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

更新：

2 个答案: