在Ionic 2

Question

我正在使用BackendLess在Ionic上构建一个项目。但我似乎无法在打字稿文件中使用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似乎没有获取值。我检查了控制台上的输出，并显示“未定义”作为输出，因此不允许注册到BackendLess。

Answer 1

include('../db.class.php'); $bdd = new db(); if($_POST) { $mediaId = $_POST['mediaId']; $rate = $_POST['rate']; $expire = 24*3600; // 1 day setcookie('Rating'.$mediaId, 'rating', time() + $expire, '/'); // Place a cookie error_reporting(E_ALL) $query = $bdd->prepare("INSERT INTO my_db (rating) VALUES (?) WHERE id = '.$mediaId.'"); $query->bindParam("i", $rate); $query->execute(); $result = $bdd->getOne('SELECT round(avg(rating), 2) AS average, count(rating) AS nbrRate FROM my_db WHERE id='.$mediaId.''); $dataBack = array('avg' => $result['average'], 'nbrRate' => $result['nbrRate']); $dataBack = json_encode($dataBack); echo $dataBack; $query->close(); $bdd->close(); } 不会获取ID为@ViewChild("some-string")的元素，而是获取模板引用some-string。您可以为HTML元素提供如下模板引用：

some-string

然后使用它来获取模板参考：

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

请注意@ViewChild("email") email: ElementRef;是您获得的类型。 ElementRef有一个名为ElementRef的属性，它是实际的nativeElement（在这种情况下是HTMLElement）。

重要提示：

由于您想要获取HTMLElements的值而不是它们的引用，因此数据绑定将是更好的方法。以下是它的工作原理：

HTML：

HTMLInputElement

然后您只需在组件中定义属性<ion-item> <ion-label floating>Name</ion-label> <ion-input type="text" [(ngModel)]="name"></ion-input> </ion-item> ：

name

Angular现在会自动为您设置值。