ngx-bootstrapアコーディオンオープンパネル

Question

ngx-bootstrap accordionを使用してブログ投稿のリストを表示します。ここで

はテンプレートです：

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

私も一度に一つだけのオープンアコーディオンパネルを持っているために、いくつかのグローバル設定を使用します。

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

更新とスクロールが正常に動作しますが、私はパネルを取得する方法を見つけ出すことができません：ポストは更新されたときに今

export function getAccordionConfig(): AccordionConfig { 
    return Object.assign(new AccordionConfig(), { closeOthers: 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; 
    }); 
    }