web-dev-qa-db-fra.com

Comment obtenir une valeur de texte d'entrée dans ionic

J'essaie d'obtenir la valeur de texte input et de la stocker dans une variable nommée input dans ionic. Mais j'ai essayé et j'ai échoué. Quelqu'un peut-il me dire s'il vous plaît ce que j'ai 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 en ionique

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

}

Est-ce que quelqu'un peut m'aider s'il vous plait?

htmlangularionic-framework
11
Jananath Banuka

En fait, vous semblez utiliser angular 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 l'utiliser.

console.log(this.name);

11
Sajeetharan
<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 la liaison bidirectionnelle de la valeur de ion-input avec le membre de classe inputValue,

à propos de ngModel

lorsque vous devez 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

La liaison bidirectionnelle est une combinaison à la fois de liaison de propriété et de liaison d'événement, car il s'agit d'une synchronisation continue des données/valeurs de la couche de présentation vers le composant et du composant. à la couche de présentation.

Comme il s'agit d'une liaison à double sens, nous devons utiliser les deux crochets - [()]. NgModel est également une directive utilisée pour lier les données dans les deux sens.

7
Ofir G