为什么 Angular ngFor 不检查可迭代对象是否存在？答案

【问题标题】：Why Angular ngFor does not check if the iterable object existing?为什么 Angular ngFor 不检查可迭代对象是否存在？
【发布时间】：2017-05-11 12:31:40
【问题描述】：

我对 Angular 2 完全陌生。我对 Angular 2 的理解是它基于将源代码编译为 Javascript 的 TypeScript。作为一种编译语言，我希望它能够捕获任何未定义的变量，但似乎ngFor 并非如此。例如，在以下代码中（我使用的是 VS Code），ngFor 用于迭代对象heroes，如果未定义 heroes，它不会给我任何错误（当我定义 heroes 时，我打错了，定义为heros，最后第二行）：

import { Component } from '@angular/core';
*export class Hero {
  id: number;
  name: string;
}
const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'my-app',  
  template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="let hero of heroes" >
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
`
})
export class AppComponent  { 
  name = 'Angular'; 
  title = 'Tour of Heroes';
  heros = HEROES;
}*

谁能给我解释一下为什么？我是不是期望太高了？

【问题讨论】：

你工作的代码在哪里？
花几分钟时间阅读和理解How to Ask 和minimal reproducible example 然后用正确的细节和相关代码更新问题
问题已经够完整了。只是格式混乱了，所以代码不可见。
例如，我会期待一条错误消息“它似乎没有检查heroes 是否已定义”没有帮助。完全不清楚这个问题是关于什么的。为什么你期望 Angular 检查未定义的变量，为什么你认为它不会？

标签： angularjs angular angular2-template ngfor

【解决方案1】：

如果*ngFor 引用的要迭代的属性是null 或undefined，*ngFor 就什么也不做。您不会因此收到错误消息。
TypeScript 是 JavaScript 的超集，undefined 是 JS 和 TS 中属性的完全有效值。

Angular2 for Dart 然而在这种情况下会产生错误。

【讨论】：

我认为在这种情况下发出警告会很方便。
从 TS 的角度来看，如果有需要警告的 norhing（如前所述）。有用于模板自动完成的 Angular 语言服务和额外的 linter 检查正在进行中（或者甚至已经可用 - 我不是最新的状态）可能会提供这样的检查。