为什么在将 ngIf 与绑定到离子复选框的布尔值属性一起使用时，我的离子按钮无法以正确的状态启动？

Question

我目前正在尝试设置一个带有复选框和条件按钮的成分列表，但默认状态有问题。我想要它，以便按钮仅在复选框未选中时可见，以便可以将成分添加到购物清单。

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

当使用 *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 示例中的样子：

Example List Formatting

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

Answer 1

请用这个

替换你的JSON

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

您需要在 isOwned 中传递布尔值，因为 'false' 表示 true

为什么在将 ngIf 与绑定到离子复选框的布尔值属性一起使用时，我的离子按钮无法以正确的状态启动？

Why does my ionic button not start in the correct state when using ngIf with a boolean property bound to an ionic-checkbox?

html

javascript

angular-ng-if

ionic-framework

angular

为什么在将 ngIf 与绑定到离子复选框的布尔值 属性 一起使用时，我的离子按钮无法以正确的状态启动？

Why does my ionic button not start in the correct state when using ngIf with a boolean property bound to an ionic-checkbox?

html

javascript

angular-ng-if

ionic-framework

angular

为什么在将 ngIf 与绑定到离子复选框的布尔值属性一起使用时，我的离子按钮无法以正确的状态启动？