Question

我是Angular 2的新手。我对Angular 2的理解是它基于TypeScript，它将源代码编译为Javascript。作为一种编译语言，我希望它能够捕获任何未定义的变量，但似乎ngFor不是这种情况。例如，在以下代码中（我正在使用VS代码），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;
}*

有人可以向我解释为什么？我期待太多了吗？

Answer 1

如果*ngFor引用的属性迭代为null或undefined，*ngFor则无法执行任何操作。你不会因此而犯错。
TypeScript是JavaScript的超集，undefined是JS和TS中属性的完全有效值。

然而，对于Dart，Angular2会为这种情况产生错误。

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

1 个答案: