Angular 2 binding: TypeError

Angular 2 binding: TypeError

本文关键字：TypeError binding Angular      更新时间：2023-09-26

请考虑以下代码，或者查看此 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
}

当您单击列表（主）中的名称时，应更新表单（详细信息）。名字和姓氏属性应分别显示在名字和姓氏输入中。

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

异常：类型错误：l_user0在 [user.firstName in DetailComponent@4：27] 中未定义

因此，不知何故，似乎不接受与用户的绑定。谁能说出为什么？

您正在将一个未定义的对象（在选择用户之前）传递给 DetailComponent。仅当存在选定用户时，才应呈现详细信息组件。

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

工作扑克。在index.html中，我不得不将导入的角度js文件从angular.min.js替换为angular.dev.js以修复plunker上一个不相关的问题。

<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>

您应该启动 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;
}
相关文章：