Question

我有以下问题。我有一个父组件，它将根据一些计算呈现一定数量的子组件。所以我有以下内容：

@Component({
   selector: 'my-app',
   template: `
      <child-element [count]="count"></child-element>
   `
   directives: [ChildElement]
})

然后在Child元素中我想做类似

的事情

@Component({
   selector: 'child-element',
   template: `
      <ul>
         <another-element *ngFor="//here should be the count number of elements//"></another-element>
      </ul>
   `
})

我想到的是创建一个for循环并创建count个元素，然后在模板中循环遍历该数组，但是有更好的方法吗？理想情况下，我应该能够将一些其他属性传递给another-element

感谢

Answer 1

也许这会对你有帮助。

输入：@Input () count: number;

助手：range(count)

已创建：<child-element [count]="5"></child-element>

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'child-element',
    template: `<li *ngFor="#int of range(count)"> Hello </li>`    
})

export class ChildElement{

    @Input () count: number;

    constructor(){

    }

    range = (value) => { 
        let a = [];

        for(let i = 0; i < value; ++i) { 
            a.push(i+1) 
        } 
     return a; 
    }
}


@Component({
    selector: 'my-app',
    template: `
              <h1>Hello World Angular2</h1> 
              <child-element [count]="5"></child-element>
              `,
    directives: [ChildElement]
})

export class App {
    constructor(){

    }
}

在Angular 2中渲染一定数量的子组件

1 个答案:

`Plunker`