Question

将对象添加到空对象数组中

2023-01-03

599

angular typescript

手头的问题与 Angular 应用的 Typescript 部分有关。

我有一个从订阅中收到的数据数组；它包含多个（但数量不一致或不可预测的）对象，这些对象具有成员“titleName”和“ID”。我需要添加成员“toggle”，它将在组件内进行交互。由于有问题的数据库调用及其其他用途，我无法在服务端添加“toggle”。我尝试了以下操作：

titlesraw;
titles: any;

...

getTitles() {
   this.getTitles.subscribe(
   data => {
      this.titlesraw = data;
      console.log(this.titlesraw); //console reads what I expect
      for (var i = 0; i < this.titlesraw.length; i++) {
           let title = {
             id: this.titlesraw[i]["ID"];
             titleName: this.titlesraw[i]["titleName"];
             toggle: true;
           }
           console.log(title); //console reads what I expect
           this.titles.push(title);
          }
       }
    )
}

当我运行代码时，出现以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'push') at <line with this.titles.push(title)>

我认为这是因为我没有正确声明 titles 。我需要做些什么不同的事情？

编辑：我已将 titles: any; 更改为 titles: any[] = []; ，但出现以下错误：

Cannot read properties of undefined (reading 'ID') at <line with this.titles.push(title)>.

再次，当我打印临时变量 title 时，它显示了完全我所期望的内容。

Answer 1

您可以使用 map 函数轻松完成此操作。

让我向您解释一下。在这里，我假设您正在从 Api 调用接收一个 array 的 objects 。您可以像这样使用 arrays 的 map 函数修改您的响应。

titles = [];
this.getTitles.subscribe(data => {
  this.titles = data.map((titleObject) => {
    titleObject.toggle = true;
    return titleObject;
  })
})

Answer 2

好吧，首先让我指出一些使用 TypeScript 时的良好做法。

坚持使用类型并避免使用 any 。查看这篇文章以更好地理解。但基本上，当您开始使用 any 时，当超过 500 名语言贡献者提供帮助时，您“...正在说 不谢谢 。听起来选择退出类型检查器，并因此失去对我们的类型系统的所有安全性和信心不应该是一个轻率的决定。”我并不是说你永远不应该使用它，即使在某些情况下你会需要它，所以请避免使用它，特别是在这种特定情况下。
为你的对象创建类型/模型。
你不需要 titlesraw ，至少在你显示的这段代码中不需要。

基于它并回答你的问题，问题是由于 titles 不是 Array 类型。 push 是 Array 类型的一种方法，因此你的 titles 应该是 Array 才能使其工作。

话虽如此，你的代码应该是这样的：

class Title {
  id: number;
  titleName: string;
  toggle: boolean;
}

titles: Title[] = [];

...

getTitles() {
   this.getTitles.subscribe(data => {
      for (var i = 0; i < this.data.length; i++) {
           const title: Title = {
             id: this.data[i]["ID"],
             titleName: this.data[i]["titleName"],
             toggle: true
           }
           this.titles.push(title);
          }
       }
    )
}