*ngFor shows element in empty array

Question

Following *ngFor

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

Where todoService is an Injected 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 shouldn't be a <li>-tag

EDIT It's also occuring when I initialize the array with values. There is always a trailing empty element for no reason.

EDIT2 Example of the problem https://plnkr.co/edit/MRYC4MHtlDLfBMUPsL6o?p=preview

Answer 1

Ah yes :) you can stare blind at problems like these, even though the solution is sometimes too simple.

I believe you would like the bottom <li> to be a closing tag? That might just fix your issue:

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