时间戳

首页 > 解决方案 > 为什么我的离子按钮在使用带有绑定到离子复选框的布尔属性的 ngIf 时不能以正确的状态启动？

javascript - 为什么我的离子按钮在使用带有绑定到离子复选框的布尔属性的 ngIf 时不能以正确的状态启动？

问题描述

我目前正在尝试使用复选框和条件按钮设置成分列表，但默认状态存在问题。我想要它，以便该按钮仅在未选中复选框时可见，以便可以将成分添加到杂货清单中。

问题是当它加载页面时，如果未选中某个成分，则不会显示该按钮。它仅在选中复选框然后取消选中后才会出现（然后在任何时候取消选中）。问题只是处于默认状态。

当使用 *ngIf 语句时，它似乎也将整个项目变成了一个可点击的对象，它似乎没有相同的行为（只能单击实际的复选框以检查它）。

HTML：

<div *ngIf="product.ingredients">
   <h5>Ingredients: </h5>
   <ion-list *ngFor="let ingredient of product.ingredients; let i = index;" lines="none" 
   class="child-list">
      <ion-item>
         {{ ingredient.name }}
         <ion-checkbox slot="start" [(ngModel)]="ingredient.isOwned"></ion-checkbox>
         <ion-button (click)="addIngredient(ingredient)" slot="end" shape="round" *ngIf="!ingredient.isOwned">
            <ion-icon name="bag-add-outline"></ion-icon>
         </ion-button>
      </ion-item>
   </ion-list>
</div>

然后在组件的 TS 文件中，我收到了一个我们希望看起来像这样的产品对象：

JSON：

{
   "ingredients": [
   {
      "name": "greek yogurt",
      "isOwned": "false"
   },
   {
      "name": "turmeric",
      "isOwned": "true"
   },
   {
      "name": "heavy cream",
      "isOwned": "false"
   }
   ]
}

这就是我希望这部分在给定的 json 示例中的外观：

示例列表格式

编辑：这是导致问题的 JSON 输入。感谢您的回答！

标签： javascripthtmlangularionic-frameworkangular-ng-if

解决方案

请用这个替换你的 JSON

{
   "ingredients": [
   {
      "name": "greek yogurt",
      "isOwned": false
   },
   {
      "name": "turmeric",
      "isOwned": true
   },
   {
      "name": "heavy cream",
      "isOwned": false
   }
   ]
}

您需要在 isOwned 中传递布尔值，因为“假”表示真

推荐阅读