我使用 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);
});
}
更新和滚动工作正常,但我不知道如何打开面板。视图更新并滚动后,所有面板都将关闭。我希望打开更新帖子的面板。