Аккордеон ngx-bootstrap динамически открывает панель

Я использую аккордеон ngx-bootstrap для отображения списка сообщений в блоге.

Вот шаблон:

<accordion id="blog-list">
    <accordion-group *ngFor="let post of posts; let first = first;" [isOpen]="first" id="post-{{post.id}}">
        <!-- Here goes content irrelevant to the question -->
    </accordion-group>
</accordion>

Я также использую некоторую глобальную конфигурацию, чтобы одновременно иметь только одну открытую панель аккордеона.

export function getAccordionConfig(): AccordionConfig {
  return Object.assign(new AccordionConfig(), { closeOthers: true });
}

Теперь, когда сообщение обновляется, я обновляю его в списке, например так:

constructor(private elementRef: ElementRef, private postService: PostService) {
    this.postService.updatedPost.subscribe(val => {
      let i = this.posts.findIndex(post => post.id === val.id);
      this.posts[i] = val;
      let element = elementRef.nativeElement.querySelector('#post-' + val.id);
      element.setAttribute('isOpen', true); // <- this does not work
      element.scrollIntoView(true);
    });
  }

Обновление и прокрутка работают нормально, но я не могу понять, как открыть панель. После обновления представления и прокрутки все панели закрываются. Я хочу, чтобы панель с обновленным постом была открыта.


javascript angular ngx-bootstrap bootstrap-accordion
person yuva.le    schedule 08.09.2017    source источник
comment
См. этот primefaces.org/primeng/#/accordion.   -  person alehn96    schedule 08.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

Таким образом, проблема в [isOpen]="first", первое сообщение будет открыто по умолчанию, прямая манипуляция с DOM не будет запускать обновления привязок.

что вы могли бы сделать, это:

[isOpen]="activPostIndex === index"

activPostIndex = 0;
constructor(private elementRef: ElementRef, private postService: PostService) {
    this.postService.updatedPost.subscribe(val => {
      this.activPostIndex = this.posts.findIndex(post => post.id === val.id);
      this.posts[i] = val;
    });
  }
person valorkin    schedule 13.09.2017
comment
Работает отлично. Благодарю вас! - person yuva.le; 19.09.2017