I am complete new to Angular 2. My understanding of Angular 2 is that it is based on TypeScript which compiles the source code to Javascript. As a compile language, I would expect it is able to catch any undefined variable, but it seems that it is not the case for ngFor
. For example, in the following code (I am using VS Code), ngFor
is used for iterate object heroes
, it does not give me any error if heroes
is not defined (when I defined heroes
, I got a typo and defined it as heros
, last second line):
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;
}*
Could somebody kindly explain to me why? Do I expect too much?
If the property referenced by
*ngFor
to iterate over isnull
orundefined
,*ngFor
just doesn't do anything. You won't get an error for this.TypeScript is a superset of JavaScript and undefined is a perfectly valid value for a property in JS and TS.
Angular2 for Dart however produces an error for such cases.