Как применить NgClass к одной итерации через NgFor с использованием родительских / дочерних компонентов? - PullRequest
Новая
       35

Как применить NgClass к одной итерации через NgFor с использованием родительских / дочерних компонентов?

0 голосов
/ 30 сентября 2019

Я пытаюсь скрыть / показать многоуровневые кнопки при нажатии родительской кнопки. Три кнопки на уровне 1 генерируются с использованием ngFor. Я не уверен, как выбрать только желаемый уровень при нажатии вместо всех.

Я заставил его работать с кнопками самого высокого уровня (метод allShow) на уровне 0, но не тогда, когда в li-column-3 имеется более одного экземпляра кнопки (метод makeShow) илиУровень 1. Я думаю, мне нужно передать идентификатор модуля или индекс, но я не уверен, как.

Я использовал эту ссылку, чтобы помочь: 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);
  }

Что происходитесли я повторю процесс для второго уровня кнопок, каждая из трех кнопок на одном уровне показывает свои параметры, когда я хочу только одну, чтобы показать, удаляя «скрытый» класс.

Вот стекаблитц:https://stackblitz.com/edit/angular-jkpya4

1 Ответ

0 голосов
/ 04 октября 2019

Я нашел решение, хотя оно и не красивое. Мне в основном пришлось создать три отдельных логических значения на стороне дочернего компонента и передать их в родительский компонент.

Вот обновленный стек: https://stackblitz.com/edit/angular-jkpya4

, если у кого-то есть более чистый способ сделать это, не стесняйтесь писать.

...