角(6)根据API值在页面加载上将多个复选框标记为选中或未选中
角(6)根据API值在页面加载上将多个复选框标记为选中或未选中
提问于 2018-10-11 14:13:00
尝试使用TypeScript (通过推荐使用PrimeNg控件)教会我自己，我一直在努力获取多个复选框，以便从从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>TypeScript类：
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[]
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-11 14:53:36
- 首先，您不应该将id值绑定到复选框，因为它只能携带这两种状态(
true和false或on和off等)。 - 您应该在
Fruit类中创建额外的字段，比如Fruit。如果id与fruitofUserFavoriteFruit[]匹配，则其值将设置为true。 - 此
selected属性将使用复选框绑定。现在，如果用户确实更改了checkbox值，则将与属性selected同步。 - 您的代码的最后一个问题与您将
arrays与fruits和userFavouitesFruit一起迭代的方式有关。您只需要迭代一个数组，即fruits。
Stack Overflow用户
发布于 2018-10-11 14:23:25
您不应该使用两个列表，我认为您应该只有一个布尔值，指示是否需要选择这个水果。
export class Fruit {
FruitId: number;
FruitName: string;
isFavorite: boolean;
}您的(ngModel)需要连接到这个布尔女巫上，您可以从您的API中设置为true或false：
<div style="display: flex; flex-direction: column;">
Fruits:
<p-checkbox *ngFor="let fruit of fruits"
[(ngModel)]="fruit.isFavorite" binary="true"
label="{{fruits.Id}} : {{fruits.Name}}" id="fruits.Id" name="User
Favorite Fruits">
</p-checkbox>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52762290
复制相关文章
相似问题
腾讯云开发者
