Ionic 2でgetElementByIdを使用する

Question

私は、BackendLessを使用してIonicでプロジェクトを構築しています。しかし、私はtypescriptファイルのHTML要素のIDを使用することはできません。

私はコードで@ViewChildを使用しました。

HTMLコード：

<ion-item> 
    <ion-label floating>Name</ion-label> 
    <ion-input type="text" id="name"></ion-input> 
</ion-item> 

<ion-item> 
    <ion-label floating>Email</ion-label> 
    <ion-input type="email" id="email"></ion-input> 
</ion-item> 

<ion-item> 
    <ion-label floating>Password</ion-label> 
    <ion-input type="password" id="password"></ion-input> 
</ion-item> 

<ion-item> 
    <ion-label floating>Phone Number</ion-label> 
    <ion-input type="text" id="phone"></ion-input> 
</ion-item> 

<ion-item> 
    <ion-label floating>Profile Picture</ion-label> 
    <ion-input type="file" id="pic"></ion-input> 
</ion-item> 

<button ion-button (click)='userreg();'>Register</button></ion-content> 

活字体コード：

export class Register { 

    @ViewChild('name') name; 
    @ViewChild('email') email; 
    @ViewChild('password') password; 
    @ViewChild('phone') phone; 
    @ViewChild('pic') pic; 

constructor(public navCtrl: NavController, private alertCtrl: AlertController) { 
    } 

    ionViewDidLoad() { 
console.log('ionViewDidLoad Register'); 
    } 

    userreg() { 
    var picURL; 
    var user = new Backendless.User(); 
     user.email=this.email; 
     user.password=this.password; 
     user.name=this.name; 
     user.phone=this.phone; 

    Backendless.UserService.register(user).then(this.userRegistered).catch(this.gotError); 
} 

gotError(err) // see more on error handling 
    { 
    console.log("error message - " + err.message); 
     console.log("error code - " + err.statusCode); 
    } 

userRegistered(user) 
    { 
    console.log("User registered"); 
} 

} 

@ViewChildは値を取得していないようです。私はコンソール上の出力をチェックし、出力として「Undefined」と表示しているので、BackendLessに登録することはできません。

Answer 1

@ViewChild("some-string") id some-stringの要素は取得せず、代わりにテンプレート参照some-stringを取得します。テンプレートの参照を取得するために、これを使用し、その後

<ion-input type="email" #email></ion-input>

をそして：ElementRefはあなたが得るタイプがある

@ViewChild("email") email: ElementRef;

注意することをあなたは、テンプレートの参照このようなあなたのHTML要素を与えることができます。 ElementRefには、実際のHTMLElement（この場合はHTMLInputElement）のnativeElementという1つのプロパティがあります。

重要発言：

あなたがHTMLElementsの値ではなく本当に自分の参照を取得したいので、データバインディングは、よりよい方法でしょう。

HTML：：ここではそれがどのように動作するかである

<ion-item> 
    <ion-label floating>Name</ion-label> 
    <ion-input type="text" [(ngModel)]="name"></ion-input> 
</ion-item> 

をそして、あなたは自分のコンポーネントにプロパティnameを定義する必要があります。

public name: string; 

角度は今、あなたのために自動的に値を設定します。