İyonik 2/açısal 2 - İçeriğimdeki Bendext ile HTML elemanlarını nasıl ekleyebilirim?

Question

Lütfen başlığa göre karar vermeyi sevmeyin, önce yayını okuyun.

Yeni bir çalışma olan ve tip 2 ile çalışmaya başladım.

böyle, typscript değişkeni "newItem" referans html elemanı ekliyorum: "HTML'lerini ayarlar I) (bir işlev addTodo sahip bileşen için benim typescript sınıfında,

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

iyon maddelik 'etiketi derleme üzerinde göz ardı edilir ve sadece ekler 'div öğesi için testi': newItem" nedense

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

pluss/sağ köşesindeki simgesini eklemek basıldığında'.

appliction aşağıdaki gibi görünecektir:

Bileşen sınıfı:

Yani görünümüne bu eklemek çalıştı:

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

Ama şimdi tıkladığımda İptal veya ekle, sayfanın yeniden yüklenmesi gerekiyor. [(ngModel)] = "newItem" ile yanlış bir şey yaptığımı biliyorum, açısal değişkeni modele aktarmaya çalışmalı mıyım yoksa bunu yapmanın daha iyi bir yolu var mı?

düzenleme: @JoeriShoeby 'un aşağıdaki yanıtında görüldüğü gibi, değişkeni (tıklama) işlevine geçirdiniz. modelde

:

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

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

Kişisel bileşen

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