ionic2 新增html,Ionic 2/angular 2 – 如何将带有Typescript的HTML元素添加到我的组件中？...

请不要不喜欢标题判断,先阅读帖子.

我刚开始学习使用离子2框架的typescript和angular 2.

我正在添加引用typscript变量“newItem”的html元素,如下所示：

{{item}}

test

在我的组件的typescript类中,我有一个函数addTodo(),当按下右角的pluss / add图标时,它设置“newItem”的HTML：

addTodo(){

this.newItem = "test";

}

由于某种原因,编译时会忽略“ion-item”标记,它只会在div元素中插入“test”.

申请将如下所示：

组件类：

所以我试着将它添加到视图中：

Cancel

Add

但现在当我单击取消或添加时,页面需要重新加载.

我知道我对[(ngModel)] =“newItem”做错了,我应该尝试将Angular变量传递给模型,还是有更好的方法来做到这一点.

编辑：将变量传递给(单击)函数,如@JoeriShoeby在下面的答案中所示.

在模型中：

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"];

}

}