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

Question

请不要不喜欢看标题，请先阅读帖子。

我刚刚开始学习使用 ionic 2 框架的 typescript 和 angular 2。

我正在添加引用 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>

在我的组件的 typescript 类中，我有一个函数 addTodo()，当按下右上角的加号/添加图标时，它为“newItem”设置 HTML：

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

由于某种原因，“ion-item”标签在编译时被忽略，它只将“test”插入到 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)]="newItem" 上做错了，我应该尝试将 Angular 变量传递给模型还是有更好的方法来做到这一点。

编辑：将变量传递给 (click) 函数，如下面@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 文件

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

你的组件

// 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 = "";
}