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

您似乎没有为newUser班级成员分配任何内容。
行[(ngModel)]="newUser.name"中触发器中的错误。

您尝试从name获取undefined。我建议使用?.运算符。

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

并在构造函数中创建一个空用户：

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

    this.newUser = new User;
  }

Answer 2

您需要先newUser使newUser.name

成为newUser: User = new User();

你可以像

一样入侵

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

并通过添加构造函数

来更改User类

Person

希望这会有所帮助

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

2 个答案: