Я получаю данные с сервера - массив категорий: interface Category {id: number, name: string, items: []}

Я хочу создать группу на основе каждой категории, потому что в категории есть items: [], поэтому группа работает как выпадающий элемент - она ​​открывается и скрывается при нажатии.

Представим, что группа определена так: interface Group {id: number, name: string, elements: []}.

Предположим, в родительском компоненте я получаю категории:

public categories $: Observable <Category []>;

А в шаблоне этого компонента я объединяю категории в группу:

<app-category-group * ngFor = "let cat of categories $ | async"> </app-category-group>

Как не смешивать типы Категория и Группа ? Неважно, каким будет контент в Группе. Где это делать? В родительском после получения категорий для преобразования в другой тип Group? В то же время я не хочу изменять исходные данные.

Я пробовал это:

Компонент групп:

public categories$: Observable<Category[]>;
public categoriesGroup$: Observable<CategoryGroup[]>;

constructor() {
   this.categoriesGroup$ = this.categories.pipe((map(category) => {name:"Group1", items: category} as Group)
}

}

Внутри шаблона GroupsComponent :

<app-groups-component>
   <app-group-component *ngFor="let groupCategory of categoriesGroup$" [group]="groupCategory"></app-group-component>
</app-groups-component>

Что ты об этом думаешь?

2
Irina 13 Фев 2021 в 11:47

1 ответ

Лучший ответ

Здесь я попытался добиться того, чего вы хотели до сих пор.

Детская площадка

Думаю, вам не нужно изменять / модифицировать данные, если у вас есть удобная вложенная форма данных.

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

Надеюсь, это сработает для вас.

1
Yuriy 13 Фев 2021 в 15:18