Question

我希望能够根据在Angular 6中输入文本字段中输入的内容创建x个子组件。例如，如果我输入5，则将创建5个子组件。

这是我的父组件：

<input type="text" class="form-control" [(ngModel)]="circlecount">
<div id="rectangle">
   <app-circle *ngFor="let circle of circleArray; let i = index" 
      [index]="i"></app-circle>
</div>

这是我的孩子部分：

export class CircleComponent {
  circleArray;
  @Input() index: number;
  @Input() circlecount: number;

  ngOnChanges(){
    this.circleArray = Array(this.circlecount).fill(0).map((x,i)=>i);
  }  

}

我在输入字段中输入数字，但没有任何反应。

Answer 1

您不能使用ngModel绑定到另一个组件中的属性。将计数绑定到父组件内部的属性，然后通过@Input

将其传递给子组件

Answer 2

这是我整理起来的东西，可以使它按照您的描述进行工作。

shape.component.ts （父级）

import { Component } from '@angular/core';

@Component({
selector: 'app-shape',
    template: `<input type="text" class="form-control"
        [(ngModel)]="circleCount" (keyup)="changes()">
        <div id="rectangle">
        <app-circle *ngFor="let circle of circleArray; let i = index"
            [index]="i"></app-circle>
        </div>`,
    styles: ['']
})
export class ShapeComponent {
    circleCount = 0;
    circleArray = [];
    changes() {
        this.circleArray = new Array(+this.circleCount)
            .fill(0).map((x, i) => i);
    }
}

circle.component.ts （子级）

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-circle',
    template: `<div>Circle {{index}}</div>`,
    styles: ['']
})
export class CircleComponent {
    @Input() index: number;
    constructor() { }
}

Answer 3

问题很简单。数据绑定属性更改时，将调用生命周期挂钩OnChanges。对于与ngModel的绑定，请使用（ngModelChange）=“ onChange（$ event）”。

标记：

<input type="number" [ngModel]="circlecount" (ngModelChange)="onChange($event)">

onModelChange事件：

onChange(circlecount: number): void {
  this.circlecount = circlecount;
  this.circleArray = new Array(this.circlecount).fill(0).map((x,i)=>i);
}

根据角度6中的输入文本字段值创建x个子组件

3 个答案: