绑定ngFor中的变量时出现问题

Question

如何在ngFor中双向绑定变量，以便根据变量的值动态创建HTML元素？

这是显示我想要做的事情的小提琴：https://plnkr.co/edit/nmo5zwnSQjTHBk8YxvOJ?p=preview

最初hello出现4次因为我已将repeatNumber初始化为4.但是当我更改该值时，Hello输出应重复多次。

这是我的AppComponent：

AppComponent：

import {Component} from 'angular2/core';
import {RepeatPipe} from './pipe';

@Component({
    selector: "my-app",
    template: `
      <div>
        <input type="text" value="5" [(ngModel)]="repeatNumber"/>
        <label>Repeat Number: {{repeatNumber}}</label>
        <div *ngFor='#i of repeatNumber | repeat'>
          Hello
        </div>
      </div>
    `,
    pipes: [RepeatPipe]
})
export class AppComponent{
  repeatNumber: number = 4;
}

以下是帮助重复HTML元素的CustomPipe：

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
    name: 'repeat'
})
export class RepeatPipe implements PipeTransform{
    transform(value) {
        return (new Array(value)).fill(1);
    }
}