Question

嗨，我对使用Angular 7足够陌生，只是想知道是否有比我目前遇到的方法更简单的方法来构建Angular Material Chips列表。

在Mongo DB中，我有一个比萨饼数据集合，每个比萨饼都有一个对象。在每个披萨内，我都有一个浇头数据列表。每个浇头都有自己的名称，例如topping1，topping2等。对于某些披萨，默认情况下最多可以包含6个浇头，或者少于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>

在Angular 7中定义具有多个数据源的Angular材料芯片

0 个答案: