Question

嗨，在Angular 4中，我使用以下代码将数据从API解析为TypeScript行数组。如果存在元素[＆＃39; item.tceCampRun＆＃39;，＆＃39; item.tceCommTreeDetail＆＃39;]，则以下代码有效。

如果其中一个像元素item.tceCommTreeDetail不存在我得到这个ERROR TypeError：无法读取属性＆＃39; map＆＃39;未定义的。

处理这样的嵌套对象的最佳方法是什么？

 private handleGetCamp(data: Response) {
    if (data.status === 200) {
      // this.tceCamp = data.json();
      // this.firstTceCamp = this.tceCamp[0];

      let other = []; // your other array...
      let j = 1;
      let run = 999000;
      let runheader = true;
      let runheaderid = 1;

      data.json().map(item => {
          j++;
          runheader = true;
          return {
              id: j,
              rowtype: 'camp',
              expanded: false,
              cells: [{ cid: 1, text: item.name }, { cid: 2, text: item.dailyStartTime }, { cid: 3, text: item.dailyEndTime }, { cid: 4, text: item.scriptId }, { cid: 14 }],
              rows:[{
                id: run++,
                pid: j,
                header: true,
                rowtype: 'run',
                expanded: false,
                cells: [{cid: 1, text: 'Runs', header: false},
                  {cid: 2, text: 'Created', header: true},
                  {cid: 3, text: 'Modified', header: true},
                  {cid: 4, text: 'Camp', header: true},
                  {cid: 12, text: ' ', header: true},
                  {cid: 13, text: ' ', header: true}],
                rows:
                  item.tceCampRun.map(item2 => {
                    return {
                      id: run++,
                      mypid: runheaderid,
                      pid: runheaderid,
                      rowtype: 'run',
                      expanded: false,
                      cells: [{cid: 1, text: item2.name}, {cid: 2, text: 'c 2'}, {cid: 3, text: 'c 3'}, {
                        cid: 4,
                        text: item2.id
                      }, {cid: 14}]
                    }
                  })
              },
                {
                id: run++,
                pid: j,
                header: true,
                expanded: false,
                rowtype: 'InteractiveScript',
                cells: [{ cid: 1, text: 'Interactive Script', header: false },
                  { cid: 2, text: 'Response', header: true },
                  { cid: 3, text: 'Action', header: true },
                  { cid: 4, text: 'Action Value', header: true },
                  { cid: 12, header: true  },
                  { cid: 13, header: true }],
                rows:
                  item.tceCommTreeDetail.map(item3 => {
                    return {
                      id: run++,
                      mypid: runheaderid,
                      pid: runheaderid,
                      rowtype: 'run',
                      expanded: false,
                      cells: [{cid: 1, text: item3.name}, {cid: 2, text: 'c 2'}, {cid: 3, text: 'c 3'}, {
                        cid: 4,
                        text: item3.id
                      }, {cid: 14}]
                    }
                  })

                }
              ]

          }
      }).forEach(item => other.push(item));

嵌套行应如下所示：

Answer 1

让事情更容易阅读和更清晰，而不是：

return {
  // ...everything under the sun...
  // ...all in one long, long, list...
};

您应该考虑在return之前将该大对象的某些子部分分配给其他变量。

然后执行以下操作：

if (item.tceCommTreeDetail) {
  rows = item.tceCommTreeDetail.map(item3 => {...
  ...
}
else {
  rows = []; // Or null, or whatever else you want here if item.tceCommTreeDetail is not defined.
}

然后：

return {
  // ...
  rows: rows,
  // ...
};

Angular2，Typescript：array map（）方法：推送嵌套元素。无法阅读财产＆＃39; map＆＃39;未定义的

1 个答案: