Angular2动态添加div

时间:2017-02-21 09:32:22

标签: angular

我有一个输入框,我将在其中指定一个数字,如3或4及其下方,我有一个父div。根据输入框中指定的数字,我希望在父级内有多个div。

        <div class="mdl-step__content">
            <!-- specify number -->
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="text5">
                <label class="mdl-textfield__label" for="text5">Number of important collegues</label>
                <span class="mdl-textfield__error">Number required!</span>
            </div>
            <!-- circular divs -->
            <div class="parent">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div> 

我怎样才能实现它?

更新: enter image description here

1 个答案:

答案 0 :(得分:3)

您可以将ngFor用于此目的:

<input ngModel (ngModelChange)="updateNumber($event)" class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="text5">

<div class="parent">
  <div class="circle" *ngFor="let item of items"></div>
    
updateNumber(val:number) {
  this.items = new Array(+val);
}