QWERTY
QWERTY

Reputation: 2315

Angular 2D Array not updating table rows and columns accordingly

I was having some problem when trying to initialize 2D array based on different condition in Angular Typescript. Here is my TypeScript:

selectSvcNoTable: any[][] = [];

const numofOrder = Number(value); // value here update according to input number
if (this.selectedSvcTy === this.SVC_TYP_IPHONENET) {
      this.selectSvcNoTable = [[new Array(numofOrder)], [new Array(3)]];
} else {
      this.selectSvcNoTable = [[new Array(numofOrder)], [new Array(1)]];
}

In my HTML:

<tr *ngFor="let row of selectSvcNoTable; let rowIdx = index;">
    <td *ngFor="let col of row; let colIdx = index;">         
    </td>

However, the table only shows two rows regardless on the value I set in 'numofOrder'. Any ideas? Thanks in advance!

Upvotes: 0

Views: 129

Answers (1)

user4676340
user4676340

Reputation:

[[new Array(numofOrder)], [new Array(3)]]

This syntax results in :

[
  [
    [0, 1, 2]
  ], [
    [0, 1, 2]
  ]
]

You don't have a 2D array but a 3D array.

Try this instead :

selectSvcNoTable: any[][] = [];

const numofOrder = Number(value); // value here update according to input number
if (this.selectedSvcTy === this.SVC_TYP_IPHONENET) {
      this.selectSvcNoTable = [new Array(numofOrder), new Array(3)];
} else {
      this.selectSvcNoTable = [new Array(numofOrder), new Array(1)];
}

Upvotes: 1

Related Questions