Angular 循环上的子组件的ngbCollapse

我正在使用

ng bootstrap

为我的Angular 4应用程序添加一些指令。现在我正试图实现一个带有链接的侧栏，链接是动态填充的。我有一组父链接，单击后会展开，并显示一组其他链接（页面中的片段）。这是我所拥有的，基于页面上的示例：

模板：

---

此外，有时突然出现错误，

无法绑定到“appQuestionCollapser”，因为它不是“button”的已知属性（“yQuestions”class=“nav flex column”>
][appQuestionCollapser]=“categoryQuestion[0].id”

。有什么想法吗？

我只需要更改模板上的输入。使用锚定标记就可以了

<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
  <a class="btn btn-link" appQuestionCollapser="{{categoryQuestion[0].id}}" routerLink="./">{{categoryQuestion[0].name}}</a>
  <ul class="nav flex-column">
    <div id="questions{{categoryQuestion[0].id}}" class="collapse">
      <li *ngFor="let question of categoryQuestion[1]" class="nav-item">
        <a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
      </li>
    </div>
  </ul>
</li>
</ul>

{{类别问题[0]。名称}


{{问题.名称}

你能添加简单版本的

类别问题
数组吗？为什么要使用
类别[0]
和
类别[1]
？好像我明白了：）这是一个元组数组。。。我知道，有点复杂。
export class QuestionListComponent implements OnInit {
    public isCollapsed = true;
    private categoryQuestions: Array<[Category, Question[]]>;
    /* ... */
}

<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
  <button class="btn btn-link" [appQuestionCollapser]="categoryQuestion[0].id"
      [attr.aria-expanded]="!isCollapsed">{{categoryQuestion[0].name}}</button>
  <ul class="nav flex-column">
    <div id="questions{{categoryQuestion[0].id}}" class="collapse">
      <li *ngFor="let question of categoryQuestion[1]" class="nav-item">
        <a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
      </li>
    </div>
  </ul>
</li>

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[appQuestionCollapser]'
})
export class QuestionCollapserDirective {

  @Input('appQuestionCollapser') categoryId: number;
  public collapsed: boolean;

  constructor(private el: ElementRef) { this.collapsed = true; }

  @HostListener('click') onCategoryClick() {
     this.el.nativeElement.className += ' active';
     const element = document.querySelector('#questions' + this.categoryId);
     if (this.collapsed) {
       element.classList.add('show');
     } else {
       element.classList.remove('show');
   }
   this.collapsed = !this.collapsed;
 }
} 

<ul *ngFor="let categoryQuestion of categoryQuestions" class="nav flex-column">
<li class="nav-item">
  <a class="btn btn-link" appQuestionCollapser="{{categoryQuestion[0].id}}" routerLink="./">{{categoryQuestion[0].name}}</a>
  <ul class="nav flex-column">
    <div id="questions{{categoryQuestion[0].id}}" class="collapse">
      <li *ngFor="let question of categoryQuestion[1]" class="nav-item">
        <a class="question-item" routerLink="./" fragment="question{{question.id}}">{{question.name}}</a>
      </li>
    </div>
  </ul>
</li>
</ul>