ngForで変数をバインドする際の問題

Question

ngForで変数を双方向バインドすると、変数の値に応じてHTML要素が動的に作成されます。ここで

は私がやろうとしています何を示すフィドルです：私は4にrepeatNumberを初期化しているためhttps://plnkr.co/edit/nmo5zwnSQjTHBk8YxvOJ?p=preview

は当初、ハロー4回表示されます。しかし、私はその値を変更すると、こんにちは出力はの多くの数を繰り返す必要回。ここで

は私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); 
    } 
} 

Answer 1

入力から値があるためです文字列と@Pipe関数の期待値はです。

ここでは、更新パイプです：

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

@Pipe({ 
    name: 'repeat' 
}) 
export class RepeatPipe implements PipeTransform{ 
    transform(value) { 
     const numberValue = Number(value); 

     return (new Array(numberValue)).fill(1); 
    } 
} 

そして更新plunker：https://plnkr.co/edit/ukNlIa71658vWjrs6Pm5?p=preview