如何使用父/子组件通过 NgFor 将 NgClass 应用于单次迭代？

Question

我试图在父按钮单击时隐藏/显示分层按钮。第 1 层的三个按钮是使用 ngFor 生成的。我不确定如何在单击而不是全部选择所需的层。

我已经让它在第 0 层上的最高级别按钮（allShow 方法）上工作，但当 li-column-3 或第 1 层上有多个按钮实例（makesShow 方法）时，它就不行了。我想我需要传入模块 ID 或索引，但我不确定如何。

我已使用此链接来提供帮助： https://levelup.gitconnected.com/angular-7-share-component-data-with-other-components-1b91d6f0b93f

child.html

<div class="fas arrow-btn" [ngClass]="{'fa-angle-right' : !allShow, 'fa-angle-down' : allShow}" (click)="outputShowAllMethod()"></div>

父.html

<ul class="li-column-1">
    <li *ngFor="let module0 of subscriptions.cart.members">
        <app-subscription-button [module]="module0" (allShowOutput)="allShowParent($event)" [subscriptions]="subscriptions" tier="0"></app-subscription-button>
        <ul class="li-column-3" [ngClass]="{'hidden': !allShow && mobile}">
            <li *ngFor="let module1 of module0.members; let i = index">
                <app-subscription-button [module]="module1" (makesShowOutput)="makesShowParent($event, module1.id)" [subscriptions]="subscriptions" [index]="i" tier="1"></app-subscription-button>
                <ul class="li-column-2" [ngClass]="{'hidden': !makesShow && mobile}">
                    <li *ngFor="let module2 of module1.members">
                        <app-subscription-button [module]="module2" [subscriptions]="subscriptions" tier="2"></app-subscription-button>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

父.ts

allShowParent($event) {
    this.allShow = $event;
  }
  makesShowParent($event, moduleId) {
    this.makesShow = $event;

  }

child.ts

@Input() module: object;
  @Input() subscriptions: object;
  @Input() tier: number;
  @Input() index: number;
  @Input() moduleId: number;
  @Output() allShowOutput = new EventEmitter<boolean>();
  @Output() makesShowOutput = new EventEmitter<boolean>();
...

outputShowAllMethod() {
    this.allShow = !this.allShow;
    this.allShowOutput.emit(this.allShow);
  }

  outputShowMakesMethod(mod) {

    if (mod.id === this.moduleId) {
      mod.makesShow = !mod.makesShow;
    }
    this.makesShowOutput.emit(mod);
  }

如果我对第二层按钮重复该过程会发生什么，同一层上的三个按钮中的每一个都会在我只想显示一个时显示它们的选项，删除“隐藏”类。

这里是堆栈闪电战：https://stackblitz.com/edit/angular-jkpya4

Answer 1

我找到了一个解决方案，尽管它并不漂亮。我基本上必须在子组件端创建三个单独的布尔值并将它们提供给父组件。

这里是更新的 stackblitz：https://stackblitz.com/edit/angular-jkpya4

如果有人有更简洁的方法，请随时发布。