[英]Ionic 2/angular 2 - How do I add HTML elements with Typescript to my component?
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框架一起使用的打字稿和angular 2。
I'm adding the html element referencing the typscript variable "newItem", like this: 我添加了引用打字稿变量“ 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. 编辑:将变量传递给(单击)函数,如下面@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"];
}
}
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 = "";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.