如何在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>';  
    }

我将如何使用ionic2/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