Ionique 2/angulaire 2 - Comment puis-je ajouter des éléments HTML avec Tapuscrit de mes composants?

S'il vous plaît ne pas détester à en juger par le titre, de lire le premier post.

Je viens de commencer l'apprentissage tapuscrit et angulaire 2 travailler avec les ionique 2 cadre.

Je suis en ajoutant le code html de l'élément de référence le typscript variable "newItem", comme ceci:

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

Dans mon tapuscrit de classe pour le composant, j'ai une fonction addTodo(), qui définit le code HTML "newItem" quand le pluss/ajouter une icône dans le coin supérieur droit est enfoncé:

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

Pour une raison quelconque, le "ion-point" de la balise est prise en compte à la compilation et il insère uniquement "test" à l'élément div.

L'appliction ressemblera à ceci:

Ionique 2/angulaire 2 - Comment puis-je ajouter des éléments HTML avec Tapuscrit de mes composants?

Classe de composant:

Ionique 2/angulaire 2 - Comment puis-je ajouter des éléments HTML avec Tapuscrit de mes composants?

J'ai donc essayé de l'ajouter à la vue:

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

Mais maintenant quand je clique sur annuler ou ajouter, la page a besoin de recharger.
Je sais que je suis en train de faire quelque chose de mal avec l' [(ngModel)]="newItem", devrais-je essayer de passer l'angle variable dans le modèle ou est-il une meilleure façon de le faire.

edit: Passé de la variable au cours de la (sur) la fonction, comme on le voit dans @JoeriShoeby 's réponse ci-dessous.

Dans le modèle:

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"];
  }
}
Pouvez-vous me donner votre classe de composant ? Vous avez réellement besoin de pousser un nouvel élément de l'objet dans la "todos' tableau. Pas html
J'ai ajouté de la classe à la poste. J'ai pensé que je pourrais juste mettre à jour le tableau, mais je veux le nouvel élément à prendre en entrée, et ont des boutons pour l'enregistrement et l'annulation. J'ai pensé que je pourrais peut-être faire un nouveau composant pour le addTodo (contenu). Mais je ne peux pas comprendre comment ajouter dynamiquement un composant avec une fonction.
Donnez-moi une heure, alors que j'ai un ordinateur de code pour vous expliquer
Que serait grandement apprécié ^^
Vous n'êtes pas en utilisant angulaire de la façon dont il est censé être utilisé. Dans Angulaire, le point de la vérité est le modèle, la vue. Vous de modifier l'affichage en modifiant le modèle. Basé sur le nouveau modèle, l'affichage s'actualise lui-même et montre le nouvel état du modèle. Pour ajouter un nouvel élément, ajouter un nouvel élément à la todos tableau. La vue sera alors de rafraîchissement: ngFor remarquerez qu'il y a un élément nouveau, et ajoute un nouvel élément à la page.

OriginalL'auteur Kevin Frostad | 2016-10-03

  1. 4

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

    Votre composant

    //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 = "";
}
    Qui a travaillé comme un charme, et avait l'air bien aussi. Sauf que maintenant les boutons ne s'affichent pas. Avez-vous eu leur montrer? J'ai essayé avec le <ion-boutons de fin> balises et sans.
    Créer un bouton dans un <ion boutons-end> tag, et à l'intérieur de ce bouton, l'icône correspondante/texte
    <ion boutons-end> me donne une erreur et la page ne se charge pas. Peut-être que c'est quelque chose de ionique 1 et pas 2? Sortie de la Console: non Gérée Promesse de rejet: Modèle erreurs d'analyse: 'ion' n'est pas un élément connu:
    Je peux les amener à montrer n'importe où d'autre, mais à l'intérieur de la ion-élément lorsque il y a également un ion d'entrée.
    Vous aurez besoin d'utiliser un <ion-boutons de fin>.

    OriginalL'auteur JoeriShoeby