NGX-Bootstrap手风琴动态打开面板

Question

我使用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);
    });
  }

更新和滚动效果很好，但是我不知道如何打开面板。视图更新并滚动后，所有面板都关闭。我希望打开带有更新帖子的面板。

Answer 1

因此，问题在[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;
    });
  }