Nsryjdtyk

I have the following declaration in my component:

private years: Array<{

    year: string,

    colspan: number

  }> = ;

Which is supposed to be a years-Array where each entry has the two properties year and colspan. Now I want to modify this variable with the following method called in my ngOnInit:

fillYearsArray = () => {

    var currentIndex : number = 1;

    //fill the first entry and do not change it afterwards, error occurs here

    this.years[0].year = "";

    this.years[0].colspan= 1;



    this.items.forEach( (item) => {

      //if the first entry.year is empty fill it with the year of the current object

      if (this.years[currentIndex].year) {

      //if it is already set and the years equal enlarge colspan  

      //otherwise go to the next entry with the "new" year

      if (this.years[currentIndex].year === String(item.year)) {

          this.years[currentIndex].colspan += this.columnKeys.length;

        } else {

          currentIndex++;

          this.years[currentIndex].year = String(item.year);

          this.years[currentIndex].colspan = this.columnKeys.length;

        }

      } else {

        this.years[currentIndex].year = String(item.year);

      }

    });

  }

But when running ng serve I get the following output:

AppComponent.html:1 ERROR TypeError: Cannot set property 'year' of undefined

    at TabularComponent.fillYearsArray (tabular.component.ts:27)

    at TabularComponent.push../src/app/tabular/tabular.component.ts.TabularComponent.ngOnInit (tabular.component.ts:22)

    at checkAndUpdateDirectiveInline (core.js:18537)

    at checkAndUpdateNodeInline (core.js:19801)

    at checkAndUpdateNode (core.js:19763)

    at debugCheckAndUpdateNode (core.js:20397)

    at debugCheckDirectivesFn (core.js:20357)

    at Object.eval [as updateDirectives] (AppComponent.html:1)

    at Object.debugUpdateDirectives [as updateDirectives] (core.js:20349)

    at checkAndUpdateView (core.js:19745)

So it looks like the first object in the array would be undefined, but shouldn't TS know, that it has an property year that is changed for the object at the first entry of my years-array?

You need to add an element before you change it's value

you try to access

this.years[0]

but this.years length is 0

so you need to do it like this

this.years.push({ year: "", colspan: 1});

if you want to add item in your array you need to use the .push() function.
If you try to go to the index you want to set, it won't work