在 Ionic 2 中使用 getElementById

Question

我正在使用BackendLess在Ionic上构建一个项目。但是我似乎不能在打字稿文件中使用 HTML 元素的 id。

我在代码中使用了@ViewChild。

网页代码：

<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

@ViewChild("some-string")不会获取带有 idsome-string的元素，而是获取模板引用some-string。您可以像这样为您的 HTML 元素提供模板引用：

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

然后使用它来获取模板引用：

@ViewChild("email") email: ElementRef;

请注意，ElementRef是您获得的类型。ElementRef有一个名为nativeElement的属性，它是实际的HTMLElement(在本例中为HTMLInputElement(。

重要评论：

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

.HTML：

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

然后，您只需要在组件中定义一个属性name：

public name: string;

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