时间戳

首页 > 解决方案 > Angular (6) 根据 API 值在页面加载时将多个复选框标记为选中或未选中

angular - Angular (6) 根据 API 值在页面加载时将多个复选框标记为选中或未选中

问题描述

尝试使用 TypeScript（通过推荐使用 PrimeNg 控件）自学 Angular (6)，我一直在努力获取多个复选框以从我的 API 填充的对象数组中加载它们的值。

本质上，我有两个来自我的 API 的数据集：fruits[] 和 userFavFruits[]。我的目标是显示一个复选框列表，该列表基于从当前用户的 API 检索到的 userFavFruits[]，将在页面加载时检查其关联的水果复选框。

我已经尝试了几种不同的方法，我在这里和网上找到了，但似乎没有像我想象的那样工作。

这会将每个复选框加载为选中状态，而不关心 userFavFruits[] 中的 id 是否存在于 fruits[] 中并基于此进行选择。这是我不确定如何完成的。

HTML：

<div style="display: flex; flex-direction: column;">
Fruits:
  <p-checkbox *ngFor="let fruit of fruits;let userFavFruit of 
    userFavFruits;"
    [(ngModel)]="userFavFruit.FruitId" binary="true"
    label="{{fruits.Id}} : {{fruits.Name}}" id="fruits.Id" name="User 
    Favorite Fruits">
  </p-checkbox> 
</div>

打字稿类：

export class UserFavFruit{
    UserFruitId: number;
    UserId: number;
    FruitId: number;
}

export class Fruit {
    FruitId: number;
    FruitName: string;
}

在我的组件中，我在 ngOnInit() 上从我的 API 中检索数据：

ngOnInit() {
    this.getFruits(); //populates fruits[]
    this.getUserFavFruits();//populates userFavFruits[]
}

标签： angularprimeng

解决方案

  1. 首先，您不应该将 id 值绑定到复选框，因为它只能携带两种状态（true和falseORon等off）。

  2. selected您应该在课堂上创建额外的字段说Fruit。id如果与其中之一匹配，则其值将设置为fruittrue UserFavoriteFruit[]。

  3. 该selected属性将与复选框绑定。现在，如果用户确实更改了checkbox值，则将与属性同步selected。

  4. 您的代码的最后一个问题与您迭代arraysforfruits和userFavouitesFruit在一起的方式有关。您只需要遍历一个数组，即fruits.

示例演示在这里 - https://stackblitz.com/edit/angular-w1tr5u

推荐阅读