Ионный 2/угловой 2 - Как добавить элементы HTML с помощью Stylecript к моему компоненту?

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.

смартфона как будет выглядеть следующим образом:

Компонент класса:

Так что я попытался добавить это к виду:

<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", должен ли я попытаться передать угловую переменную на модель или есть лучший способ сделать это.

Редактировать: Передача переменной на функцию (щелчок), как показано в ответе @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 = ""; 
}