* ngFor shows an element in an empty array

Question

Next * ngFor

<ul> <li *ngFor="#todo of todoService.todos"> {{todo}} <li> </ul> 

Where todoService is an embedded interface

 import {Injectable} from 'angular2/core'; @Injectable() export class TodoService { todos = [] } 

When I load the page, the output is <li></li> instead of nothing.

Any idea why? Since the array is empty, there should not be <li> -tag

EDIT This also happens when I initialize an array with values. There is always a finite empty element for no reason.

EDIT2 Example Problem https://plnkr.co/edit/MRYC4MHtlDLfBMUPsL6o?p=preview

Answer 1

Oh yes :) you can blindly look at such problems, although the solution is sometimes too simple.

I believe the bottom <li> should be a closing tag? This may fix your problem:

 <ul> <li *ngFor="#todo of todoService.todos"> {{todo}} </li> <!-- this nagger right here --> </ul> 

Answer 2

I can not reproduce your problem with beta1:

 @Component({ selector: 'my-app', template: ` <div> Test: <ul> <li *ngFor="#l of service.list">{{l}}</li> </ul> </div> ` }) export class AppComponent { constructor(private service:Service) { } } 

See this plunkr: https://plnkr.co/edit/hGpCIZQghtMBbpplV9tV?p=preview .

What version of Angular2 did you use?

Thierry