Whenever I attempt to include an input field on the template, I encounter this error message:
TypeError: self.context.newUser is undefinedThis is the component in question.
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);
}
}
The template code snippet is as follows:
<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>
Also, here is the User class defined for reference.
export class User{
name: string;
lastName: string;
}
I am relatively new to Angular 2 and Typescript, so identifying the issue has been a challenge. Any help or insight would be greatly appreciated.