Создайте неповторимую структуру внутри ngFor или что-то вроде ngForOutlet - PullRequest
Новая
       5

Создайте неповторимую структуру внутри ngFor или что-то вроде ngForOutlet

0 голосов
/ 01 апреля 2020

Как создать внутри ng такую ​​структуру, которая не будет повторяться? Мне нужно что-то вроде ngForOutlet. Я хочу сгруппировать элементы в зависимости от какого-либо свойства элемента, а затем вставить их в подходящий элемент div.

Чтобы лучше показать, чего я хочу достичь, вот некоторый псевдокод: 

<div *ngFor="let item of someData">
    <div>
      <h4>Group A</h4>
        <div *ngForOutlet *ngIf="item.group === 'a'">
            <div>
                {{item.brand}}
                {{item.model}}
            </div>
        </div>
    </div>
    <div>
      <h4>Group B</h4>
        <div *ngForOutlet *ngIf="item.group === 'b'">
            <div>
                {{item.brand}}
                {{item.model}}
            </div>
        </div>
    </div>
  </div>

Все элементы из группа A будет вставлена ​​в div под заголовком группы A и все из группы B под группой B.

@ Редактировать: В настоящее время у меня есть что-то подобное, но я хочу сгруппировать это:

HTML

<div *ngFor="let item of someData">
    <app-some-card #card [brand]="item.brand"></app-some-card>
</div>

<button (click)="onClick()">test</button>

.ts 

export class ParentComponent implements OnInit {
  @ViewChildren('card') cards: QueryList<SomeCardComponent>;

  someData = [{...},{...},...];

  onClick() {
    this.cards.forEach(card => {
        card.doSomething();
    }
  }
}

1 Ответ

1 голос
/ 01 апреля 2020

Я бы порекомендовал структурировать вашу модель в соответствии с вашими требованиями.

В вашем компоненте, как только вы через него извлечете someData, l oop и добавляете элементы в соответствующие группы.

component.ts 

someData: any[];
groupA: any[];
groupB: any[];

ngOnInit() {
  this.someData = [{
    group: 'a'    
  }, {
    group: 'b'
  }, {
    group: 'a'
  }];

  this.groupA = [];
  this.groupB = [];

  this.someData.forEach(item => {
    if (item.group === 'a') {
      this.groupA.push(item);
    } else if (item.group === 'b') {
      this.groupB.push(item);
    }
  });
}

Тогда достаточно просто связать эти группы в вашем HTML.

компоненте. html

  <div>
    <h4>Group A</h4>
        <div *ngFor="let item of groupA">
            <div>
                {{item.brand}}
                {{item.model}}
            </div>
        </div>
    </div>
    <div>
      <h4>Group B</h4>
        <div *ngFor="let item of groupB">
            <div>
                {{item.brand}}
                {{item.model}}
            </div>
        </div>
    </div>
...