Error trying to diff '[object Object]' in Angular

Question

Looks like something wrong with freight variable in HTML:

Error in app/freightList.component.html:13:8 Error trying to diff \'[object Object]\'

Answer 1

I ran into this issue when I changed the WebApi I was calling to return a Task<IActionResult> instead of the previous IEnumerable<object>. Check the response isn't wrapped in an object. I had to change my extractData method to:

private extractData(res: Response) {
   let body = res.json();
   return body.result || body || { };
}

Answer 2

Your extractData (and possibly also your HTTP API) is returning an object {} - ngFor requires an array [] to iterate.

Change your service/API to produce an array, or transform the object in your component.

Answer 3

The best way is to take the NgForm object and call its reset() function.

Example:

Html file

<form #exampleform='ngForm'>

</form>

ts file

@ViewChild('exampleform') exampleform :NgForm;

this.exampleform.reset(); // resets the form

Answer 4

The problem (for me) was in my newState definition. Below is the correct definition:

const newState = (state, newData) => {
    return Object.assign([], state, newData);
}

My newState was converting my array to an object because I was using the wrong brackets - the Wrong Way is below.

const newState = (state, newData) => {
    return Object.assign({}, state, newData);
}

Good luck, I hope that helps, Rob