Search code examples
angulartemplatesspread-syntax

Property added to array in Angular app via spread operator breaking template rendering

I have some covid-19 data coming from a source which I can render ok. I don't control the endpoint so I take it as it comes. If the science i hear is correct for every two confirmed there may be one unconfirmed, so I want to show adds a suspected cases column alongside the confirmed cases

So I'm effectively massaging the incoming data by adding a new calculated property 1.3 times the confirmed number, cv19_actisus is the new property name

this.newShape = this.covidCases.map(res => ({...res.attributes,
  cv19_actisus: res.attributes.cv19_acti * 1.3  }) )
    this.filteredmCovid = this.newShape;

I’ve create a Stackblitz here, this works as expected except when I add the calculated property nothing renders anymore. You can see the newly added property is added by drilling down in console

Just comment in/out the three lines above to see the template renders fine before the new property is added, but when the code with the spread operator is called nothing renders but I can see the new calculated property is present for each of the 88 object/rows returned.

I thought it might be a timing issue, rendering before the data is available so I tried a reactive approach i.e. only observables and using the async pipe in the template and I tried making the data service return a hard coded object with the same shape as the endpoint.

Can someone advice me or show me a working similar example’ thanks in advance!

Solution

  • The following will solve your problem using the spread operator:

    this.newShape = this.covidCases.map(res => ({attributes: {...res.attributes,
  cv19_actisus: `${Math.round(res.attributes.cv19_acti * 1.3)}` }})  )
});

    Onto the why.

    this.newShape = this.covidCases.map(res => ({...res.attributes,
  cv19_actisus: res.attributes.cv19_acti * 1.3  }
))

    Resolves to an object that is of the type Attributes, you can test this by printing the first instance of the this.newShape.

    When you print the first line of your current code, you get this:

    {FID: 24, codmun: 35016, municipio: "Las Palmas de Gran Canaria" ... }

    However, what you want is an object of the type Feature, which has the key attributes and is of the Attributes. This is because the filteredmCovid is of the type Feature.