javascript - 如何在Angular的递归ng模板中显示和隐藏子列表？

Question

我在这里查找了很多不同的答案，但大多数都不准确。所以，我想问一下显示和隐藏列表（ul）的好方法是什么，但只有通过onclick点击的列表。

我有以下模板

        <ul *ngIf="children">
            <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: children }"></ng-container>
        </ul>
          
          <ng-template #recursiveListTmpl let-children>
          <li *ngFor="let item of children; let i=index">
              {{item.name}}
              <ul *ngIf="item.children" class="sublists">
                  <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: item.children }"></ng-container>
              </ul>
          </li>
          </ng-template>

Children是一个包含名称和更多子对象的对象数组。

我试图为每个子列表绑定特定的类，然后通过它获取这些元素，document.getElementsByClassNames但它不能正常工作。

您目前有什么正确的方法来解决我的问题吗？我应该如何尝试切换这些子列表？我真的不知道了……我的 Angular 版本是 9。

Answer 1

您可以在列表中添加布尔类型的隐藏，默认为false，当您要显示子列表时，将其更改为true

例如

          <li *ngFor="let item of children; let i=index">
              <div *ngIf="item.hidden">
                  {{item.name}}
                  <ul *ngIf="item.children" class="sublists">
                  <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: item.children }"></ng-container>
                  </ul>
              </div>
              <button (click)="showHide(item)">Show/Hide</button>
          </li>

单击时将其更改为 true，使其在 yout .ts 文件中可见例如

showHide(item) {
    item.hidden = !item.hidden;
}