Ionic 2/angular 2 - 如何在組件中添加Typescript的HTML元素？

Question

請不要以標題來評判，先閱讀帖子。

我剛開始學習使用離子2框架的typescript和angular 2。

我加入的HTML元素引用typscript變量「的newitem」，像這樣：

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

在我的打字稿類我有一個函數addTodo（）的組件，它設置爲HTML「的newitem」當pluss /在右上角添加圖標按：

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

出於某種原因，‘離子項目’標籤上編譯忽略，它只是插入‘測試’的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 = ""; 
}