web-dev-qa-db-ja.com

Ionic 2 / angular 2-TypeScriptを使用してHTML要素をコンポーネントに追加するにはどうすればよいですか？

タイトルで判断するのを嫌がらないで、最初に投稿を読んでください。

TypeScriptとangular 2 ionic 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」タグは無視され、div要素に「test」のみが挿入されます。

アプリケーションは次のようになります。

enter image description here

コンポーネントクラス：

enter image description here

だから私はこれをビューに追加しようとしました：

<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変数をモデルに渡すか、これを行うより良い方法がありますか？ 。

編集：以下の@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"];
  }
}
htmlangularionic-frameworkionic2typescript2.0
8
Kevin Frostad

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