如何在ionic2/angularJS中動態添加元素

Question

我希望用戶能夠使用ionic 2/angular添加用戶輸入等元素。例如與正常的JS我會使用此代碼：

function addDestination(){ 
     var destDiv = document.getElementById('destPlaceholder'); 
     destDiv.innerHTML += '<ul class="rounded"><li><input type="text" class="node" placeholder="text" id="d" /></li></ul>'; 
    } 

我將如何去做這與ion2/angularJS？

Answer 1

在Ionic2/Angular2中，您可以在頁面/組件的模板（html）中使用ngFor指令爲數組中的每個項目呈現HTML元素。

在您的打字稿中，您可以將一個元素推送到此數組中，並將其作爲ngFor的額外元素呈現。

爲您的代碼：

在你的模板

：

<ul class="rounded"> 
    <li *ngFor="let item from items"> 
     <input type="text" class="node" placeholder="{{item.someattribute}}" id="{{item.id}}" /> 
    </li> 
</ul> 

在您的打字稿

：

public items:any[] = []; 

addDestination() { 
    this.items.push({id: 1, text: "the item's text"}); 
} 

絕對看看https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html