Comment faire pour obtenir l'entrée de texte valeur ionique

Je vais essayer d'obtenir input valeur de texte et de le stocker dans une variable nommée input dans ionic. Mais j'ai essayé et échoué. Quelqu'un peut-il me dire ce que j'ai défectueux fait?

C'est mon HTML

  <ion-content>
  <ion-list>
    <ion-item> 
        <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" ></ion-input>
    </ion-item>    
  </ion-list>
  </ion-content>

et c'est mon home.ts ionique dans les

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    var input=document.getElementById('input').nodeValue;
    document.getElementById('seven').innerHTML=input;
  }

}

Quelqu'un peut-il m'aider?

OriginalL'auteur Jananath Banuka | 2018-01-14

  1. 4

    En fait vous semble être l'utilisation angulaire de ne pas angularjs, utilisez [(ngModel)]

     <ion-input type="text" [(ngModel)]="name" text-right id="input" ></ion-input>

    et à l'intérieur du composant,

    name:string;

    donc à chaque fois que vous avez besoin de la valeur , vous pouvez utiliser.

    console.log(this.name);

    J'ai essayé ce. mais est-ce ng-model fonctionne pour les versions plus récentes?
    qu'entendez-vous par nouvelles versions?
    et comment puis-je obtenir ng-model de la valeur à chaque fois que je besoin?
    J'ai mis name:string à l'intérieur du composant, mais il affiche une erreur...
    Il a ajouté le nom de la propriété à la Composante de métadonnées 🙂

    OriginalL'auteur Sajeetharan

  2. 4
    <ion-content>
  <ion-list>
    <ion-item> 
      <ion-label stacked>display</ion-label>
      <ion-input type="text" text-right id="input" [(ngModel)]="inputValue"></ion-input>
    </ion-item>    
  </ion-list>
</ion-content>

    //===

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    inputValue: string = "";
    constructor(public navCtrl: NavController) {}

    someFunction() {
        //here you can use the 'this.inputValue' and get the value of the ion-input 
    }

}

    nous utilisons les deux cas un engagement de la valeur des ions d'entrée avec le membre de la classe inputValue,

    sur ngModel

    whan, vous avez besoin d'accéder à la valeur de l'entrée, vérifiez la valeur de inputValue.

    ici vous pouvez voir un exemple que j'ai écrit sur StackBlitz

    Liaison bidirectionnelle est une combinaison de deux de la propriété de liaison et de liaison d'événement comme il est un continue de synchronisation de données/valeurs de couche de présentation pour composant et les constituants de la couche de présentation.

    Puisque c'est une liaison bidirectionnelle nous avons à la fois utiliser les crochets - [ ( ) ]. Aussi ngModel est une directive qui est utilisé pour lier les données de deux manières.

    OriginalL'auteur Ofir G