[英]Angular2 dynamically adding divs
I have an input box where I will specify a number like 3 or 4 and below it I have a parent div. 我有一个输入框,我将指定一个数字,如3或4及其下面我有一个父div。 As per the number specified in the input box I want to have that many divs inside parent. 根据输入框中指定的数字,我希望在父级内有多个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>
How can I achieve it? 我怎样才能实现它?
You can use ngFor
for this purpose: 您可以为此目的使用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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.