Angular2动态添加div

我有一个输入框，我将指定一个数字，如3或4，在它下面我有一个父div。根据输入框中指定的数字，我希望在父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> 

重要同事人数
所需号码！

我怎样才能做到呢

更新：

---

为此，您可以使用

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>

---

应该是：

新数组（val）

？我还必须从函数中删除set。但是，它不允许我在该div上添加

*ngFor=“let item in items”

。它说：嵌入模板上的任何指令都不使用属性绑定ngForIn。哇，对不起！似乎是我的一个比较草率的答案。它应该是的

，而不是

中的

。现在它没有给出任何错误，但无论我输入什么数字，它只给我一个div。为我的问题添加图像！使用
新数组（+val）
确保将其视为数字。是的，太完美了！非常感谢：）
updateNumber(val:number) {
  this.items = new Array(+val);
}