web-dev-qa-db-ja.com

ionicで入力テキスト値を取得する方法

inputテキスト値を取得して、inputのionicという名前の変数に保存しようとしています。しかし、私は試して失敗しました。誰が私に間違ったことを教えてくれますか？

これは私の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>

これは私のhome.tsイオン

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

}

誰でも助けてくれますか？

htmlangularionic-framework
11
Jananath Banuka

実際にあなたはangularではなく、angularjsを使用して、[（ngModel）]を使用しているようです。

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

コンポーネント内

_name:string;_

そのため、値が必要な場合はいつでも使用できます。

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 
    }

}

イオン入力の値をクラスメンバーinputValueにバインドする2つの方法を使用します。

約ngModel

入力値にアクセスする必要がある場合は、inputValueの値を確認してください。

ここで、私が書いたサンプルを見ることができます StackBlitz

双方向バインディングは、プロパティバインディングとイベントバインディングの両方の組み合わせであり、プレゼンテーション層からコンポーネントへ、およびコンポーネントからのデータ/値の継続的な同期です。プレゼンテーション層に。

これは双方向バインディングであるため、両方の角括弧[（）]を使用する必要があります。また、ngModelは、両方の方法でデータをバインドするために使用されるディレクティブです。

7
Ofir G