属性 通过扩展运算符破坏模板渲染添加到 Angular 应用中的数组

Question

我有一些 covid-19 数据来自我可以正常渲染的来源。 我不控制端点，所以我接受它。如果我听到的科学是正确的 每两个确认可能有一个未确认，所以我想显示在确认病例旁边添加一个疑似病例列

所以我通过添加一个新的计算 属性 来有效地处理传入的数据 确认数的1.3倍，cv19_actisus就是新的属性名字

this.newShape = this.covidCases.map(res => ({...res.attributes,
  cv19_actisus: res.attributes.cv19_acti * 1.3  }) )
    this.filteredmCovid = this.newShape;

我已经创建了一个 Stackblitz here，它按预期工作，除了当我添加计算的 属性 时没有任何渲染。在console

下钻可以看到新增的属性

只需评论 in/out 上面的三行即可看到在添加新的 属性 之前模板渲染良好，但是当调用带有扩展运算符的代码时，没有任何渲染，但我可以看到88 object/rows returned.

中的每一个都存在新计算的 属性

我认为这可能是一个时间问题，在数据可用之前渲染所以我尝试了 一种反应性方法，即仅可观察对象并在模板中使用异步管道，我尝试使数据服务 return 成为与端点具有相同形状的硬编码对象。

有人可以给我建议或给我一个类似的工作示例吗？在此先感谢！

Answer 1

以下内容将使用展开运算符解决您的问题：

this.newShape = this.covidCases.map(res => ({attributes: {...res.attributes,
  cv19_actisus: `${Math.round(res.attributes.cv19_acti * 1.3)}` }})  )
});

关于原因。

this.newShape = this.covidCases.map(res => ({...res.attributes,
  cv19_actisus: res.attributes.cv19_acti * 1.3  }
))

解析为 Attributes 类型的对象，您可以通过打印 this.newShape.

的第一个实例来测试它

当您打印当前代码的第一行时，您会得到：

{FID: 24, codmun: 35016, municipio: "Las Palmas de Gran Canaria" ... }

但是，您想要的是 Feature 类型的对象，它具有键 attributes 并且属于 Attributes。这是因为 filteredmCovid 的类型是 Feature.

Answer 2

如果我理解得很好，你想为每个 res 更改或添加一个 attributes，并且你想克隆每个 res 以避免改变数据？

对我来说，问题来自于您 map 返回的数据。 您的输入是：Array<{attributes: {codenum, .....;}> 并且您的输出是 Array<{codenume, .....}>.

我建议你这个代码：

    this.newShape = this.covidCases.map(res => {
      const attributes = {
        ...res.attributes,
        cv19_actisus: `${Math.round(res.attributes.cv19_acti * 1.3)}`
      };
      return { ...res, attributes };
    });