आयनिक 2/कोणीय 2 - मैं अपने घटक में टाइपस्क्रिप्ट के साथ HTML तत्व कैसे जोड़ूं?

Question

कृपया शीर्षक से निर्णय नापसंद न करें, पहले पोस्ट पढ़ें।

मैंने अभी सीखने की टाइपस्क्रिप्ट और कोणीय 2 आयनिक 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 तत्व के लिए परीक्षण "।

appliction इस तरह दिखेगा:

घटक वर्ग:

तो मैं देखने के लिए इस जोड़ने की कोशिश की:

<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" के साथ कुछ गलत कर रहा हूं, क्या मुझे कोणीय चर को मॉडल पर पारित करने का प्रयास करना चाहिए या ऐसा करने का एक बेहतर तरीका है।

संपादित करें: वैरिएबल को (क्लिक) फ़ंक्शन पर पास किया गया है, जैसा कि नीचे @ जोएरीशॉबी के उत्तर में देखा गया है।

मॉडल में:

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