Angular 2 binding: TypeError

Question

Consider the below code, or see this plunk: https://plnkr.co/edit/mwPHfz?p=info.

Master

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

Detail

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

User

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

When you click on a name in the list (master) the form (detail) should be updated. The first name and last name properties should appear in the firstName and lastName inputs respectively.

However, when you look in the developer tools, you can see the following error when loading the app:

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

So somehow the binding to user doesn't seem to be accepted. Can anyone tell why?

Abdulrahman Alsoghayer · Accepted Answer · 2016-03-08 20:39:29Z

3

You are passing an undefined object (before selecting a user) to DetailComponent. You should only render the DetailComponent if there is a selectedUser.

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

Working plunker. In index.html, I had to replace the imported angular js file from angular.min.js to angular.dev.js to fix an unrelated issue on your plunker.

answered Mar 8, 2016 at 20:39

Abdulrahman Alsoghayer

16.6k7 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aetherix Over a year ago

I had already tried the *ngIf but the main issue for me was indeed the angular file that needed to change. In another project I switched from beta 6 to beta 8 and things started working there as well.

Abdulrahman Alsoghayer Over a year ago

@Aetherix there are still some open issues on the minified bundle, check #6380

Donald Duck is with Ukraine · Accepted Answer · 2017-02-16 12:58:10Z

0

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

edited Feb 16, 2017 at 12:58

Donald Duck is with Ukraine

9,00023 gold badges82 silver badges107 bronze badges

answered Feb 16, 2017 at 11:17

Mark-VII

3737 silver badges19 bronze badges

1 Comment

Donald Duck is with Ukraine Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Yoav Schniederman · Accepted Answer · 2017-02-16 14:57:50Z

you should initilize selectedUser parametes.

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

Collectives™ on Stack Overflow

Angular 2 binding: TypeError

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related