首页 > 解决方案 > 无法读取未定义的属性“变量”(Typescript / HTML / Nativescript)

问题描述

我正在编写一个 Nativescript-Angular2-Typescript 应用程序,但目前总是遇到 TypeError。

现在下面的代码已经调整为调试目的。

login.component.html

    <StackLayout>
    <Image src="res://icon" stretch="none" horizontalAlignment="center"></Image>
    <TextField [(ngModel)]="user.phonenr" hint="mobile phone number" keyboardType="phone" autocorrect="false"></TextField>
    <TextField hint="SMS code" secure="true"></TextField>
    <Button text="login" class="submit-button" (tap)="submitnr()"></Button>
    <Button text="register" class="btn"></Button>
    </StackLayout>

登录组件.ts

    import { Component } from "@angular/core";
    import { Button } from "tns-core-modules/ui/button";
    import { User } from '../../shared/user/user';
    import { UserService } from "../../shared/user/user.service";


    @Component({
    selector: "Login",
    providers: [UserService],
    moduleId: module.id,
    templateUrl: "./login.component.html",
    styleUrls: ['./login-common.css']
    })

    export class LoginComponent {

    //Variables
    public user: User;       

    constructor(private userService: UserService) {
    this.user = new User();
    this.user.phonenr = 2222555;
    }

    public submitnr() {
    if (this.user.phonenr === undefined)
    {
    console.log("fucking undefined why ??????");
    console.log(this.user.phonenr);
    }
    else
    {
    console.log("Its defined so why getting error!!!!!!????!??!!?");
    console.log(this.user.phonenr);
    }
    }
    }

用户.ts:

    export class User {
    phonenr: number | undefined;
    }

user.service.ts:

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { User } from './user';


    @Injectable()
    export class UserService {

    constructor(private http: HttpClient) { }

    public register(user: User) {
    console.log(user.phonenr);
    }
    }

“login.component.html”中的“user.phonenr”部分总是抛出错误:TypeError:无法读取未定义的属性“phonenr”

只是提到 submitnr() 的 If 指令运行到定义的部分。

我希望我提供了所有必要的代码。如果不让我知道。

标签: androidtypescriptangular2-nativescript

解决方案


您的代码看起来正确,我只能建议您添加*ngIf="user"到输入中,即使它不能直接解决问题,它可能会有所帮助


推荐阅读