Angular 如果混合数组中的布尔值为真则显示按钮

问题描述

我正在尝试为一家披萨店构建一个基本的angular SPA

我有一个包含不同类型的披萨的数组，包括字符串、数字和布尔类型。

根据这个数组，我正在使用bootstrap生成卡片，显示名称、价格、描述、图片和可用性。

如果披萨的可用性为真，则必须在每个菜肴中显示“详情”和“订购”按钮。如果可用性为假，则不应显示该对象的按钮，只显示菜肴图片和消息“无法提供”。

这是我的数组：

export const pizze = [
    {
        name: "Margarita",
        price: 13,
        description: "Tomato Cheese Fior di Latte",
        image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
        available: false
    },
    {
        name: "Marinara",
        price: 10,
        description: "Tomato, Garlic, Oregano",
        image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
        available: true
    },
    {
        name: "Quattro Formaggi",
        price: 15,
        description: "Tomato and 4 different cheeses",
        image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
        available: true
    },
    {
        name: "Diavola",
        price: 14,
        description: "Tomato cheese salami pimento de padron",
        image: "https://cdn.pixabay.com/photo/2016/03/05/21/47/american-1239091_960_720.jpg",
        available: false
    },

我在一个单独的ts文件中定义了不同类型

export interface Imenu {
    name: string;
    price: number;
    description?: string;
    image: string;
    available: boolean;
}

然后我使用我的布局和ngIf Else语句创建了我的Bootstrap卡片。

  <div class="card" *ngFor="let val of menuArr; index as i">
            <img src="{{val.image}}" height="350px">
            <div class="card-body">
                <h5 class="card-title">{{val.name}}</h5>
                <p class="card-text">{{val.description}}
                </p>
                <p>{{val.price}}€</p>
                <p *ngIf="{{val.availabilty}} = true; else variableName">
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                </p>

                <ng-template #variableName>
                    <p>Not available</p>
                </ng-template>


            </div>
        </div>

menu/menu.component.html:11:20 – error NG5002: Parser Error: 在 /Users/Michael/Desktop/CodeFactory/Code Review /CR3/FE20-CR3-Almhofer/FE20-CR3-Almhofer/CR3/src/app/menu/menu.component.html@10:19 的{{val.availabilty}} = true; else variableName 中的第27列的分号是意外的标记。

11

<

p *ngIf=”{{val.availabilty}} = true; else variableName”> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

menu/menu.component.ts:6:16 6 templateUrl: ‘./menu.component.html’, ~~~~~~~~~~~~~~~~~~~~~~~ 错误发生在组件MenuComponent的模板中。

这是我遇到的错误。

如何正确检查我数组中的布尔值，并显示菜品是否可用的语法是什么？

解决方案

在*ngIf指令中，不应该使用插值（{{}}），因为它已经期望一个布尔表达式。*ngIf指令的正确语法如下所示：

<p *ngIf="val.availabilty; else variableName">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
</p>