TypeError：在Angular2上未定義self.context.newUser

Question

當我嘗試在模板上添加輸入字段時，我得到此錯誤TypeError: self.context.newUser is undefined

這是組件

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { User } from './user';
import { UserService } from './user.service';


@Component({
  selector: 'vista3',
  templateUrl: 'app/vista3.component.html',
  styleUrls:['app/vista3.component.css']
})

export class Vista3Component implements OnInit{
  users: User[] = [];
  newUser: User;

  constructor(
    private router: Router,
    private userService: UserService) {
  }

  ngOnInit(){
    this.userService.getUsers().then( users => this.users = users);
  }
}

模板

<div  class="separar">
  <table class="table table-striped">
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
      </tr>
        <tr *ngFor="let user of users">
          <td>{{user.name}}</td><td>{{user.lastName}}</td>
        </tr>
  </table>
</div>
<div  class="separar">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      Nombre: <input [(ngModel)]="newUser.name"/>
    </div>
  </div>
</div>

和用戶類

export class User{
  name: string;
  lastName: string;
}

我不知道我錯過了什么，angular2和打字稿對我來說是新的，如果有人能看到問題......

Answer 1

1. 看起來你沒有為newUser類成員分配任何東西。

2. 行[(ngModel)]="newUser.name"中的觸發錯誤。

你試圖從undefined得到name 。 我建議使用?. 運營商。

<input [(ngModel)]="newUser?.name"/>

並在構造函數中創建一個空用戶：

  constructor(
    private router: Router,
    private userService: UserService) {

    this.newUser = new User;
  }

Answer 2

您需要先使用newUser來執行newUser.name

你可以像intiliaze一樣

newUser: User = new User();

並通過添加構造函數來更改User類

export class User{
    constructor(
        public name?: string,
        public lastName?: string
    ) { }
}

希望這會有所幫助