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

如何解决通过扩展运算符破坏模板渲染将属性添加到 Angular 应用程序中的数组

我有一些来自我可以呈现的来源的 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，这按预期工作，除非我添加计算属性时不再呈现任何内容。在控制台下钻可以看到新添加的属性

只需注释掉上面的三行，即可在添加新属性之前查看模板渲染良好，但是当调用带有扩展运算符的代码时，没有任何渲染，但我可以看到每个都存在新的计算属性返回的 88 个对象/行。

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

有人能给我建议或给我看一个类似的例子吗？提前致谢！

解决方法

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

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。

,

如果我理解得很好，您想为每个 attributes 更改或添加一个 res 并且您想克隆每个 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 };
    });