ngx-bootstrap 手风琴动态打开面板

Question

我使用 ngx-bootstrap 手风琴来显示博客列表 posts。

这是模板：

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

现在，当 post 更新时，我会在列表中更新它，如下所示：

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

更新和滚动工作正常，但我不知道如何打开面板。视图更新并滚动后，所有面板都将关闭。我希望打开更新后 post 的面板。

Answer 1

所以问题在[isOpen]="first"，第一个post会默认打开使用 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;
    });
  }

ngx-bootstrap 手风琴动态打开面板

ngx-bootstrap accordion open panel dynamically

javascript

angular

ngx-bootstrap

bootstrap-accordion