ngModel表演奇怪 - Angular2

Question

myList: any;
ngOnInit(){
    this.myList = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];
}

In my html

<input *ngFor="let l of myList" [(ngModel)]="l.name" name="{{l.id}}" />

It's working good as below:

Chrome Dev:

Then when I call another service in my ngOnInit like below:

myList: any;
ngOnInit(){
    this.myList = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];

    this.outletService.getAll().then(outlets => {
         this.outlets = outlets;
    });
}

Suddenly, there is no value in the input as you see below: My html code is the same.

What could possibly be happened? How can I get the value to appear in the inputs?

Here is the outletService .getAll()

getAll() {
    return new Promise(resolve => {
        let headers = new Headers({
        'Content-Type': 'application/json'
        });
        let options = new RequestOptions({ headers: headers });
        this.http.get(this.host + '/outlets', options)
            .subscribe(data => {
                resolve(data.json()); //Return array of objects
            });
    });
}

Here is the return from the outletService:

There is no error in the console, and I want the property name from this.myList , not outletName from this.outlets .

Update

What's more interesting is: I don't even need to call another service: If i just assign new array to this.outlets, it won't work, like this case:

myList: any;
outlets: any;
ngOnInit(){
    this.myList = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];
    this.outlets = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];
}

And add another line to the html file.

<input *ngFor="let l of myList" [(ngModel)]="l.name" name="{{l.id}}" />
<input *ngFor="let o of outlets" [(ngModel)]="o.outletName" name="{{o.id}}" />

Answer 1

You should change your template. There is no name attribute on your returned data:

<input *ngFor="let l of myList" [(ngModel)]="l.outletName" name="{{l.id}}" />

Ohh, well.. Gunter already mentioned this in his comment :)

Answer 2

In fact, the ngModel doesn't give any values to the input because the id properties of the two objects are the same!

If I change from this:

myList: any;
outlets: any;
ngOnInit(){
    this.myList = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];
    this.outlets = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];
}

To this:

myList: any;
outlets: any;
ngOnInit(){
    this.myList = [
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
    ];
    this.outlets = [
        {id: 5, name: 'a'},
        {id: 6, name: 'b'},
        {id: 7, name: 'c'},
        {id: 8, name: 'd'},
    ];
}

Then it works! ask me why? I don't know.. If someone can explain would be great!