Angular 2 binding：TypeError

Question

考虑下面的代码，或者看看这个plunk：https://plnkr.co/edit/mwPHfz?p=info。

主

import {Component} from "angular2/core"; 
import {DetailComponent} from "./detail.component"; 
import {User} from "./user"; 
import {MOCKUSERS} from "./mock-users"; 

@Component({ 
    directives: [DetailComponent], 
    selector: "master", 
    template: ` 
     <h2>Master</h2> 

     <div> 
      <ul> 
       <li *ngFor="#user of users" (click)="selectUser(user)"> 
        {{user.firstName}} {{user.lastName}} 
       </li> 
      </ul> 
     </div> 

     <div> 
      <detail [user]="selectedUser"></detail> 
     </div> 
    ` 
}) 
export class MasterComponent { 
    users: User[] = MOCKUSERS; 
    selectedUser: User; 

    selectUser(user: User) { 
     this.selectedUser = user; 
    } 
} 

详细

import {Component, Input} from "angular2/core"; 
import {User} from "./user"; 

@Component({ 
    selector: "detail", 
    template: ` 
     <h2>Detail</h2> 
     <div> 
      <div> 
       <input type="text" [(ngModel)]="user.firstName"> 
      </div> 
      <div> 
       <input type="text" [(ngModel)]="user.lastName"> 
      </div> 
      <div> 
       <button type="submit">Submit</button> 
      </div> 
     </div> 
    ` 
}) 
export class DetailComponent { 
    @Input() 
    user: User; 
} 

用户

export class User { 
    firstName: string, 
    lastName: string 
} 

当你点击一个名称列表（主）应该更新表格（细节）。名字和姓氏属性应分别出现在firstName和lastName输入中。

但是，当你在开发工具看，可以加载应用程序时，看到以下错误：

EXCEPTION: TypeError: l_user0 is undefined in [user.firstName in DetailComponent@4:27]

所以不知何故似乎并结合用户不被接受。谁能说出原因？

Answer 1

您将一个未定义的对象（在选择用户之前）传递给DetailComponent。如果存在selectedUser，则只应呈现DetailComponent。

<div *ngIf="selectedUser"> 
    <detail [user]="selectedUser"></detail> 
</div> 

Working plunker。在index.html中，我必须将导入的角度js文件从angular.min.js替换为angular.dev.js，以便在您的plunker上修复不相关的问题。

Answer 2

<ul class="list-group users-list"> 
    <li class="list-group-item" 
     *ngFor="let user of users" 
     (click)="selectUser(user)" 
     [class.active]="user === activeUser"> 
     {{ user.name }} ({{ user.username }}) 
    </li> 
</ul> 

Answer 3

您应该初始化selectedUser参数。

export class MasterComponent { 
    users: User[] = MOCKUSERS; 
    selectedUser: User = null; 

    selectUser(user: User) { 
     this.selectedUser = user; 
    } 
} 


<div> 
    <detail [user]="selectedUser"></detail> 
</div> 



@Component({ 
    selector: "detail", 
    template: ` 
     <h2>Detail</h2> 
     <div *ngIf="user !== null"> 
      <div> 
       <input type="text" [(ngModel)]="user.firstName"> 
      </div> 
      <div> 
       <input type="text" [(ngModel)]="user.lastName"> 
      </div> 
      <div> 
       <button type="submit">Submit</button> 
      </div> 
     </div> 
    ` 
}) 

export class DetailComponent { 
    @Input() user: User = null; 
}