-1

我对房屋进行了概述，每个房屋都有一个显示在推车内的图像。由于房屋是异步的，所以我想显示空卡，只要它们没有被提取。为此，我将空对象添加到数组中以暗示房屋。只要我不向houses. 添加 Typescript 后讨厌我，因为该对象显然不包含正确的属性。

我知道删除打字是一个解决方案，但我想这不是一个好习惯。我猜，将所有属性设为可选也不是一个好习惯。我是否必须创建具有这些属性的模拟（这会很多）还是有合适的方法来做到这一点？

houses: House[] = [{}, {}, {}, {}, {}];

ngOnInit(): void {
  this.housesService.getGreatHouses().subscribe(houses => {
    if (houses && houses.length > 0) {
      this.houses = houses;
    }
  });
}
4

1 回答 1

1

选项一：

// Partial<> makes all the properties of House optional:
houses: Partial<House>[] = [{}, {}, {}, {}, {}];

ngOnInit(): void {
  this.housesService.getGreatHouses().subscribe(houses => {
    // you need TypeScript >= 3.7 for the save navigation operator `?.`
    houses?.forEach((house, index) => {
       Object.assign(this.houses[index], house);
    });
  });
}

选项 b：

// The House properties are all there filled with null. 
houses: House[] = [{ id: null, picture: null, ... }, { id: null, picture: null, ... },{ id: null, picture: null, ... }, ...];

// values assigned the same way as above

可能这就是您希望将 House 设为类（模型）而不是接口或类型的地方，因此您不必手动完成所有这些脚手架，并且无论如何获取实例的功能等等。

选项 B 与@Eldar 在评论中建议的差不多。它可能是更清洁、规模更大、性能更高的解决方案。

为什么它更干净，在规模上更高效？

添加或删除对象属性 ( delete obj.property) 会阻止 JavaScript 解释器分配在运行时优化代码的方法。除此之外，结构也更加明确，如果结构是可预测的并且不会在运行时不断转换，那么最终代码将更容易调试。

于 2020-10-09T20:53:27.993 回答