[英]Angular2 dynamically adding divs
我有一個輸入框,我將指定一個數字,如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>
我怎樣才能實現它?
您可以為此目的使用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.