Ionic 2/angular 2 - 如何将带有 Typescript 的 HTML 元素添加到我的组件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39837534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 2/angular 2 - How do I add HTML elements with Typescript to my component?
提问by Kevin Frostad
Please don't dislike judging by the title, read the post first.
请不要不喜欢看标题，请先阅读帖子。
I've just started out learning typescript and angular 2 working with the ionic 2 framework.
我刚刚开始学习使用 ionic 2 框架的 typescript 和 angular 2。
I'm adding the html element referencing the typscript variable "newItem", like this:
我正在添加引用 typscript 变量“newItem”的 html 元素，如下所示：
<ion-content>
<ion-list inset>
<ion-item *ngFor="let item of todos" (click)="edit(item)">
{{item}}
</ion-item>
<ion-item>test</ion-item>
<div [innerHTML]=newItem></div>
</ion-list>
</ion-content>
In my typescript class for the component I have a function addTodo(), which sets the HTML for "newItem" when the pluss/add icon in the right corner is pressed:
在组件的打字稿类中，我有一个函数 addTodo()，当按下右上角的加号/添加图标时，它会为“newItem”设置 HTML：
addTodo(){
this.newItem = "<ion-item>test</ion-item>";
}
For some reason the "ion-item" tag is ignored on compilation and it only inserts "test" to the div element.
出于某种原因，编译时会忽略“ion-item”标签，它只会将“test”插入到 div 元素中。
The appliction will look like this:
该应用程序将如下所示：
Component class:
组件类：
So I tried to add this to the view:
所以我尝试将其添加到视图中：
<form *ngIf="editedItem">
<ion-item><input [(ngModel)]="newItem" name="newItem">
<ion-buttons end>
<button ion-button color="danger" (click)="btnCancel()">Cancel</button>
<button ion-button color="secondary" (click)="btnAdd()">Add</button>
</ion-buttons>
</ion-item>
</form>
But now when I click cancel or add, the page needs to reload. I know I'm doing something wrong with the [(ngModel)]="newItem", should I try to pass the Angular variable over to the model or is there a better way to do this.
但是现在当我点击取消或添加时，页面需要重新加载。我知道我对 [(ngModel)]="newItem" 做错了，我应该尝试将 Angular 变量传递给模型还是有更好的方法来做到这一点。
edit: Passed the variable over to the (click) function, as seen in @JoeriShoeby 's answer below.
编辑：将变量传递给 (click) 函数，如下面@JoeriShoeby 的回答所示。
In the model:
在模型中：
export class TodosPage {
newItem = "";
todos: string[] = this.getTodos();
editedItem: boolean = false;
constructor(public navCtrl: NavController) {
}
addTodo(){
this.editedItem = true;
}
btnAdd(){
this.todos.push(this.newItem);
this.editedItem = false;
}
btnCancel(){
this.editedItem = false;
}
getTodos(): string[]{
return ["item 1", "item 2"];
}
}
采纳答案by JoeriShoeby
Your HTML file
你的 HTML 文件
// Your plus-icon in your header bar
<button (click)='toggleNew == true'>
<ion-icon name='plus'></ion-icon>
</button>
// Your content
<ion-content>
<ion-list inset>
<ion-item *ngFor="let item of todos" (click)="edit(item)">
{{item}}
</ion-item>
</ion-list>
<ion-item *ngIf='toggleNew'>
<ion-input [(ngModel)]='newItem' placeholder="Task .. "></ion-input>
<button (click)='saveNew(newItem)'>Save</button>
<button danger (click)='cancelNew()'>Cancel</button>
</ion-item>
</ion-content>
Your component
您的组件
// Initalial values.
newItem: string = "";
toggleNew: boolean = false;
// Saving function
saveNew( newItem: string ): void {
this.todos.push(newItem);
this.toggleNew = false;
this.newItem = "";
}
// Cancel function
cancelNew(): void {
this.toggleNew = false;
this.newItem = "";
}
