Ionic 2 / angular 2 - 如何使用Typescript将HTML元素添加到我的组件中？

Question

请不要不赞成标题，先阅读帖子。

我刚开始学习使用离子2框架的打字稿和角色2。

我添加了引用typscript变量＆＃34; newItem＆＃34;的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>

在我的组件的typescript类中，我有一个函数addTodo（），它为＆＃34; newItem＆＃34;设置了HTML。当按下右角的pluss / add图标时：

  addTodo(){
    this.newItem = "<ion-item>test</ion-item>";
  }

出于某种原因，＆＃34;离子项＆＃34;编译时忽略tag，它只插入＆＃34; test＆＃34;到div元素。

申请表如下：

组件类：

所以我尝试将其添加到视图中：

<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>

但现在当我点击取消或添加时，页面需要重新加载。 我知道我对[（ngModel）] =＆＃34; newItem＆＃34;做错了，我应该尝试将Angular变量传递给模型，还是有更好的方法来做到这一点。 / p>

编辑：将变量传递给（点击）功能，如@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"];
  }
}

Answer 1

您的HTML文件

{{1}}

您的组件

{{1}}