错误TypeError：未定义不是对象

Question

在带有Angular的NativeScript项目中，我只是试图简单地使用一个对象来收集有关用户的信息。每当执行此操作时，都会收到错误消息ERROR TypeError: undefined is not an object (evaluating '_co.user.username')。我试图在NativeScript Playground中重新创建它，但是它无法识别我的模型。

所以，这是我的模型：

export interface User {
    id: number,
    username: string,
    password: string,
    firstName: string,
    lastName: string,
    permissions: string,
    year: number,
    basketball: boolean,
    dodgeball: boolean,
    football: boolean,
    soccer: boolean,
    softball: boolean,
    volleyball: boolean,
    teamID: number
}

这是我的.ts组件：

export class SignUpComponent implements OnInit {

    public user: User;

    constructor(private router: Router) { }

    ngOnInit(): void { }

    nextSignUp(): void {
        alert(this.user.username);
        this.router.navigate(['/signUpInfo']);
    }
}

然后是我使用ngModel的.html文件：

<ActionBar title="Sign Up" class="action-bar"></ActionBar>
<GridLayout class="pageBackground">
	<ScrollView>
		<StackLayout class="main-container">
			<TextField style="margin-top: 3%;" class="form-control" hint=" Email Address" keyboardType="email" returnKeyType="done" autocorrect="false"
			 autocapitalizationType="none" [(ngModel)]="user.username"></TextField>
			<Button class="btn btn-primary btn-rounded-sm" style="width: 90%; height: 7%; padding: 0px; margin-top: 77%; background-color: black; color: white; vertical-align: bottom;"
			 text="Next" (tap)=nextSignUp()></Button>
		</StackLayout>
	</ScrollView>
</GridLayout>

我不明白为什么会收到此错误或如何解决该错误。任何帮助将不胜感激。