Question

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

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[]
}

Answer 1

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

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

Answer 2

您不应该使用两个列表，我认为您应该只有一个带有布尔值的列表，指示是否需要选择该水果，例如

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>

角度（6）根据API值在页面加载时将多个复选框标记为选中或未选中

2 个答案: