错误 TypeError：无法在新的 UserComponent 处设置未定义的属性

Question

我是 Angular 的新手。我创建了一个简单的 UserComponent 并且在类中有一个名为 user 的对象，它包含用户的所有属性，如 firstname ， lastname ， age ，email 但是当我尝试在类构造函数中访问这些属性并设置它们的值时，我得到控制台中的错误提示无法设置未定义的名字属性或无法设置未定义的姓氏属性。我不知道是什么问题。这是代码：

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.css'],

})

export class UserComponent {

  user: {

    firstname: string;

    lastname: string;

    age: number;

    email: string;

  };

  constructor() {

    this.user.firstname = 'Muhammad';

    this.user.lastname = 'Shaeel';

    this.user.age = 23;

    this.user.email = '[e-mail]';

  }

}

Answer 1

你定义了一个类型，但它的值仍然是undefinedimport { Component, OnInit } from '@angular/core';export class User {    constructor(        public firstname: string,        public lastname: string,        public age: number,        public email: string,    ) { }}@Component({    selector: 'app-user',    templateUrl: './user.component.html',    styleUrls: ['./user.component.css'],})export class UserComponent {    user: User;    // Another option    // user = new User('Muhammad', 'Shaeel', 23, '[e-mail]');    constructor() {        this.user = new User('Muhammad', 'Shaeel', 23, '[e-mail]');    }}Stackblitz示例

Answer 2

这对我有用export class UserComponent {user = {firstname: '',lastname: '',age: 0,email: ''};

Answer 3

如果您只是想user在内部包含对象UserComponent而不为其声明单独的类，您也可以这样做：import { Component } from '@angular/core';@Component({  selector: 'app-user',  templateUrl: './user.component.html',  styleUrls: ['./user.component.css']})export class UserComponent {  user = {    firstname: "",    lastname: "",    age: -1,    email: ""  };  constructor() {    this.user.firstname = 'Muhammad';    this.user.lastname = 'Shaeel';    this.user.age = 23;    this.user.email = '[e-mail]';  }}

Answer 4

用户对象为空，试试下面import { Component, OnInit } from '@angular/core';export interface IUser: {    firstname: string;    lastname: string;    age: number;    email: string;  };@Component({  selector: 'app-user',  templateUrl: './user.component.html',  styleUrls: ['./user.component.css'],})export class UserComponent {  user: IUser = {    firstname: '',    lastname: '',    age: null,    email: ''  };  constructor() {    this.user.firstname = 'Muhammad';    this.user.lastname = 'Shaeel';    this.user.age = 23;    this.user.email = '[e-mail]';  }}