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

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

这把小提琴展示了我正在做的事情：

最初hello出现4次，因为我已将

repeatNumber

初始化为4。但是当我更改该值时，Hello输出应该重复多次

以下是我的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;
}

应用组件：

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;
}

---

这是因为输入的值是一个字符串，您的@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:

这是因为输入的值是一个字符串，并且@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:

非常感谢。你能告诉我你是怎么调试的吗？控制台未显示错误。没有错误，因为新数组（'5'）的语法有效，但创建了字符串值为5的数组，而不是在5是数字时创建5个元素。我在管道转换中添加了一个console.log以查看管道返回的内容。但是控制台显示：

[1,1,1]

用于输入4，即使我没有将其转换为数字。是否应该显示

['1'，'1'，'1'，'1']

？我看到您使用console.log（）更新了plunker。不，对我来说，每次在输入中插入值时都会显示[1]。新数组（'4'）返回['4']和['4']。fill（1）返回[1]。非常感谢。你能告诉我你是怎么调试的吗？控制台未显示错误。没有错误，因为新数组（'5'）的语法有效，但创建了字符串值为5的数组，而不是在5是数字时创建5个元素。我在管道转换中添加了一个console.log以查看管道返回的内容。但是控制台显示：

[1,1,1]

用于输入4，即使我没有将其转换为数字。是否应该显示

['1'，'1'，'1'，'1']

？我看到您使用console.log（）更新了plunker。不，对我来说，每次在输入中插入值时都会显示[1]。新数组（'4'）返回['4']和['4']。fill（1）返回[1]。