FormComponent.html:8 错误类型错误：无法读取未定义的属性“用户名”

Question

我正在使用 Angular 7 并遵循 form.component.html 代码：

{{ userForm.value | json}}

---

{{ 用户模型 | json}}

    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="userName" [(ngModel)]="userModel.userName">
    </div>

    <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" name="email" [(ngModel)]="userModel.email">
    </div>


    <div class="form-group">
            <label>Mobile number</label>
            <input type="number" class="form-control" name="number" [(ngModel)]="userModel.number">
    </div>


    <div class="form-group">
                <label>Address</label>
                <input type="text" class="form-control" name="address" [(ngModel)]="userModel.address">
    </div>

    <button class="btn btn-primary" type="submit">Submit Order</button>

user.js 代码

export class User {
    constructor(
        public userName: string,
        public email: string,
        public number: string,
        public address: string
    ){}
}

app.component.ts：

import { Component } from '@angular/core';
import { User } from './User';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title=['Angular','Vue','React'];

  userModel = new User('ash','ash@gmail.com','01233','asasas');
}

当我编译时，我得到错误“用户名”未定义。

Answer 1

 <input formControlName="userName" placeholder="Name" class="form-control">

在每个输入字段中使用它，它会起作用。

Answer 2

像下面这样改变你的用户类

export class User {
        public userName: string;
        public email: string;
        public number: string;
        public address: string;
    constructor(userName, email, number, address){
        this.userName = userName;
        this.email = email;
        this.number = number;
        this.address = address;
     }
}

在这里查看更多关于typescript classes.的信息

正如@Hameed Syed 所说，再次对您的类导入语句进行交叉检查。

更新

您的代码对我来说似乎很好，无论如何尝试使用 Angular 的生命周期方法进行数据绑定。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title=['Angular','Vue','React'];

  userModel: User;

  ngOnInit(){
    this.userModel = new User('ash','ash@gmail.com','01233','asasas');
  }
}