аккордеон ng2-bootstrap как создать интерактивную стрелку раскрывающегося списка

У меня такой аккордеон:

введите описание изображения здесь

Мне нужно, чтобы стрелка была такой ^, когда аккордеон открыт, и вот так v, когда аккордеон закрыт

Разметка выглядит так: обратите внимание (click)="toggleAssignedTasks()" на divaccordion-heading с этим я переключаюAssignedTasks, а затем меняю класс 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" в аккордеоне вот так:

but I get error:

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

angular angular2-directives angular2-template ng2-bootstrap
person Jeka    schedule 16.08.2016    source источник
comment
Можете выложить функцию toggleAssignedTasks()? Кроме того, почему вы используете курсив для шеврона? Наконец, showArrows не является родным, поэтому Angular ищет свойство в компоненте Accordian, которого не существует, поэтому возникает ошибка. Если возможно, попробуйте воспроизвести эффект, который вы видите в плунжере, и кому-то будет намного проще помочь вам понять, что идет не так.   -  person ABabin    schedule 17.08.2016
comment
@AndrewBabin опубликовал обновление, спасибо   -  person Jeka    schedule 17.08.2016
comment
Можете ли вы помочь лучше понять, что именно происходит не так? Во-первых, в [ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}" aria-hidden="true"> у вас есть класс нижнего шеврона, применяемого, когда isAssignedTasksVisible истинно, и верхний шеврон, применяемый, когда он ложный. Это даст вам противоположность тому, что вы ищете (вам нужен ^, когда задачи видны). Это может вызвать сбой toggleAssignedTasks(), если isAssignedTasksVisible имеет значение по умолчанию.   -  person ABabin    schedule 17.08.2016
comment
@AndrewBabin, спасибо. Что ж, сейчас происходит то, что аккордеон закрывается, даже когда я нажимаю на любой элемент в аккордеоне, который мне не нужен. Я только хочу, чтобы он открывался или закрывался при нажатии элемента шеврона.   -  person Jeka    schedule 17.08.2016
comment
@AndrewBabin, знаете ли вы, как остановить событие, которое закрывает аккордеон, когда я нажимаю на заголовок аккордеона. серая часть с надписью «Готов к просмотру» (2) на моем опубликованном изображении   -  person Jeka    schedule 17.08.2016
comment
Поместите (click)="toggleAssignedTasks()" на тег для элемента шеврона, и это должно дать вам то, что вы ищете. (click) прикрепляет прослушиватель событий щелчка к любому элементу, на который вы его поместили. Прямо сейчас у вас есть это в div для всего заголовка.   -  person ABabin    schedule 17.08.2016
comment
@AndrewBabin, спасибо за вашу помощь, проблема заключалась в том, что нажатие на любую часть группы аккордеона закрыло ее. В любом случае я публикую свое решение, спасибо за вашу помощь !!! хорошего дня!   -  person Jeka    schedule 17.08.2016

Ответы (2)


arrow_upward
0
arrow_downward

Итак, проблема заключалась в том, что мой аккордеон закрывался по щелчку группы аккордеонов, поэтому я решил это, сделав следующее:

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

}
person Jeka    schedule 17.08.2016

arrow_upward
0
arrow_downward

Почему бы не использовать стандартный group?.isOpen метод, подобный описанному здесь:

person Leyenda    schedule 13.09.2016