Angular2动态添加div

我有一个输入框，我将指定一个数字像3或4，并在它下面我有一个父div。根据输入框中指定的数字，我希望在父代中拥有多个div。Angular2动态添加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>

我该如何实现它？

UPDATE：

来源

2017-02-21 Nitish

您可以使用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); 
}

来源

2017-02-21 09:35:29

它应该是：'新的Array（VAL）'？我也必须从功能中删除设置。但是，它不允许我在该div上的项“”中添加'* ngFor =“let item。它说：属性绑定ngForIn没有被嵌入式模板上的任何指令使用。 – Nitish

哇，对不起！似乎我的一个更马虎的答案。它应该是''而不是'in'。 –

现在它不会给出任何错误，但是无论输入什么数字，它都会给我一个div。添加图像到我的问题！ – Nitish

Angular2动态添加div

回答

相关问题