社区首页 >问答首页 >角(6)根据API值在页面加载上将多个复选框标记为选中或未选中

问角(6)根据API值在页面加载上将多个复选框标记为选中或未选中
EN

Stack Overflow用户

提问于 2018-10-11 06:13:00

回答 2查看 2.1K关注 0票数 1

尝试使用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[]
}

angular

primeng

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-11 06:53:36

首先，您不应该将id值绑定到复选框，因为它只能携带这两种状态( true和false或on和off等)。
您应该在Fruit类中创建额外的字段，比如Fruit。如果id与fruit of UserFavoriteFruit[]匹配，则其值将设置为true。
此selected属性将使用复选框绑定。现在，如果用户确实更改了checkbox值，则将与属性selected同步。
您的代码的最后一个问题与您将arrays与fruits和userFavouitesFruit一起迭代的方式有关。您只需要迭代一个数组，即fruits。

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

票数 2

Stack Overflow用户

发布于 2018-10-11 06: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>