Angular 7错误类型错误：无法读取未定义的属性“ map”

Question

我刚刚开始学习Angular 7

我的要求是在课堂上明智的做法是许多学生在单个科目标记中插入如何实现它。

我的桌子是 enter image description here enter image description here

我的输出是 enter image description here

Answer 1

您是否有以下导入声明？

import { map } from 'rxjs/operators';

Answer 2

这与Angular无关，与在typescript和js中定义map的方式有关。让我们阅读一些dev mozilla：

  

[0] map依次为数组中的每个元素调用提供的回调函数，然后从结果中构造一个新的数组。仅对具有已分配值（包括未定义）的数组索引进行调用。不会因为缺少数组元素（即从未设置，已删除或从未分配值的索引）而调用它。

这仅仅是因为map不会检查是否定义了未定义的数据，所以map会忽略map（[1]，这被称为“单责任原则”，即map的工作是要映射，而不是还要检查数据是否有效）那是您的工作），但是如果值未定义，则map会抛出您看到的错误：

Cannot read property 'map' of undefined

因为要映射的数据是不确定的。

因此，您应该确保仅在您的数据有价值时才启动地图。一个简单的

if(this.data !== undefined && this.data.length > 0) {
   this.data.map(x => console.log(x));
} 

Stackblitz示例：https://stackblitz.com/edit/angular-od12bj

[0] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

[1] https://en.wikipedia.org/wiki/Single_responsibility_principle

P.s：此问题应移至打字稿部分