1

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

2 回答 2

2

  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

于 2018-10-11T14:53:36.670 回答
1

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

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>
于 2018-10-11T14:23:25.217 回答