Nested * ngFors - лучшая альтернатива? (Угловой 7) - PullRequest
Новая
       34

Nested * ngFors - лучшая альтернатива? (Угловой 7)

0 голосов
/ 29 октября 2018

У меня есть объект, который содержит массив - этот массив может содержать один или несколько объектов того же типа, что и родительский. Там нет границы на количество возможных уровней. Для отображения всех данных в текущем наборе данных у меня есть этот код: 

<div *ngIf="selectedUserMappings">
  <ul *ngFor="let group of selectedUserMappings.childGroups">
    <li style="font-weight:600;">{{group.name}}</li>
    <div *ngFor="let child of group.childGroups">
      <li *ngIf="child.active">{{child.name}}</li>
      <div *ngFor="let n2child of child.childGroups">
        <li *ngIf="n2child.active">{{n2child.name}}</li>
        <div *ngFor="let n3child of n2child.childGroups">
          <li *ngIf="n3child.active">{{n3child.name}}</li>
        </div>
      </div>
    </div>
  </ul>
</div>

Что не очень хороший способ достичь желаемого результата. Какие-нибудь указатели на лучший подход?

Редактировать: Исходя из предложений, я думаю, что путь будет фиктивный компонент. Мне нужно показать внешних родителей с другим стилем в списке, что я смогу сейчас. Но мне также нужно скрыть родителей верхнего уровня, где нет дочерних элементов (все объекты имеют активное логическое значение), а также дочерних элементов, которые не активны. Дети неактивных детей должны все еще быть видимыми все же. Есть идеи? Это то, что у меня так далеко: 

import { Component, OnInit, Input } from '@angular/core';
import { UserGroupMapping } from 'src/app/models/models';

@Component({
  selector: 'list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.scss']
})
export class ListItemComponent implements OnInit {
  @Input() data;
  list: Array<any> = [];

  constructor() { }

  ngOnInit() {
    this.data.forEach(item => {
    this.createList(item, true);
    });
  }

  createList(data, parent?) {
    if (parent) {
       this.list.push({'name': data.name, 'class': 'parent'});
       if (data.childGroups && data.childGroups.length > 0) {
        this.createList(data, false);
       }
    } else {
      data.childGroups.forEach(i => {
        this.list.push({'name': i.name, 'class': 'child'});
        if (i.childGroups && i.childGroups.length > 0) {
          this.createList(i, false);
        }
      });
    }
    console.log(this.list);
  }
}

Вызывается из родительского компонента следующим образом: 

  <div *ngIf="mappings">
    <list-item [data]="mappings.childGroups"></list-item>
  </div>

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

В итоге я удалил фиктивный компонент, построив списки непосредственно в моем компоненте, прежде чем показывать его, так что будет легче отобразить изменения немедленно. 

  createSummary() {
    this.listFinished = false;
    this.mappings.childGroups.forEach(item => {
      this.list = [];
      this.createList(item, true);

      this.list.forEach(i => {
        if (i.active) {
          this.list[0].active = true;
        }
      });
      this.lists.push(this.list);
    });
    this.listFinished = true;
  }

  createList(data, parent?) {
    if (parent) {
       this.list.push({'name': data.name, 'class': 'parent', 'active': false});
       if (data.childGroups && data.childGroups.length > 0) {
        this.createList(data, false);
       }
    } else {
      data.childGroups.forEach(i => {
        this.list.push({'name': i.name, 'class': 'child', 'active': i.active});
        if (i.childGroups && i.childGroups.length > 0) {
          this.createList(i, false);
        }
      });
    }
}

Тогда я показываю это так: 

  <div *ngIf="listFinished">
    <ul *ngFor="let list of lists">
      <div *ngFor="let item of list">
        <li [class]="item.class" *ngIf="item.active">
          {{item.name}}
        </li>
      </div>
    </ul>
  </div>
0 голосов
/ 29 октября 2018

Вы описываете дерево. Попробуйте использовать какой-то компонент дерева. Например, простое число имеет компонент дерева.

...