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

Question

我正在尝试 hide/show 父按钮点击时的分层按钮。第一层的三个按钮是使用 ngFor 生成的。我不确定如何在单击时仅 select 所需的层而不是所有层。

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

我用这个 link 来帮助： 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>

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

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

如果我对第二层按钮重复该过程会发生什么情况，当我只想显示一个按钮时，同一层上的三个按钮中的每一个都显示它们的选项，删除 'hidden' class.

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

Answer 1

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

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

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

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

How do I apply NgClass to single iteration through NgFor using parent/child components?

html

ngfor

angular

angular7