Определение чипов материала Angular с несколькими источниками данных в Angular 7

Question

Привет, я новичок в использовании Angular 7, и мне просто интересно, есть ли более простой способ структурировать список чипов угловых материалов, чем тот метод, с которым у меня сейчас проблемы.

В БД Монго у меня есть коллекция данных о пицце с объектом для каждой пиццы.Внутри каждой пиццы у меня есть список данных начинки.Каждый топпинг имеет свое собственное имя, например, топпинг1, топпинг2 и т. Д. Для некоторых пицц они могут иметь до 6 начинок по умолчанию или меньше этого значения.

ПРИМЕР ДАННЫХ JSON

[
    {
    "topping": {
        "topping1": "5bdbb355fb6fc074abb56da6",
        "topping2": "5bdbb500fb6fc074abb56e4c",
        "topping3": "5bdbb5affb6fc074abb56ea1"
    },
    "_id": "5bdbaccffb6fc074abb56b4f",
    "name": "Hawaiian",
    "sauce": "5c731ac2e7179a3e36dc6964",
    "imgurl": "Hawaiian.png",
    "available": "Yes"
    }
]

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

Итак, я хочу вывести список данных в список сменных чипов, где клиент сможет добавить больше чипсов в список чипов.с выпадающим меню, если они решат это сделать.

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

ПРИМЕРНЫЙ КОД

<mat-form-field>
    <mat-chip-list #toppingsList>

        <mat-chip *ngIf="pizza.sauce">
            <span *ngFor="let sauce of pizzaSaucedata">
                <span *ngIf="pizza.sauce == sauce._id">
                    {{ sauce.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="pizza.topping.topping1">
            <span *ngFor="let topping of pizzaToppingdata">
                <span *ngIf="pizza.topping.topping1 == topping._id">
                    {{ topping.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="pizza.topping.topping2">
            <span *ngFor="let topping of pizzaToppingdata">
                <span *ngIf="pizza.topping.topping2 == topping._id">
                    {{ topping.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="pizza.topping.topping3">
            <span *ngFor="let topping of pizzaToppingdata">
                <span *ngIf="pizza.topping.topping3 == topping._id">
                    {{ topping.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="pizza.topping.topping4">
            <span *ngFor="let topping of pizzaToppingdata">
                <span *ngIf="pizza.topping.topping4 == topping._id">
                    {{ topping.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="pizza.topping.topping5">
            <span *ngFor="let topping of pizzaToppingdata">
                <span *ngIf="pizza.topping.topping5 == topping._id">
                    {{ topping.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="pizza.topping.topping6">
            <span *ngFor="let topping of pizzaToppingdata">
                <span *ngIf="pizza.topping.topping6 == topping._id">
                    {{ topping.name }}
                </span>
            </span>
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>


        <mat-chip *ngIf="addedtopping">
            <mat-icon matChipRemove *ngIf="toppingRemovable">cancel</mat-icon>
        </mat-chip>

    </mat-chip-list>
</mat-form-field>