How to fix a mapping of two dimensional array in typescript

Issue

I am using angular. Below are typescript and html codes. In typescript code, line this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => 0); //has issues has error in it. But its working fine with single dimensional array : this.selectedPartyArray = this.parties.map(_ => 0); //working. How can i fix this multidimensional array issue?

Error: Type 'number[]' is not assignable to type 'number[][]'. Type 'number' is not assignable to type 'number[]'.

.ts file

 interface Candidate {
      id?: Number,
      name: string,
      party: string,
      preferences: Array<Number>
    }
    interface Party {
      party: String,
      preferences: Array<Number>
    }
    
    interface SenateCandidate {
      id: Number,
      attributes: senateCandidateAttributes
    }
    
    interface senateCandidateAttributes {
     
      updatedAt: String
    }
    
    interface mappedSentateCandidate {
      party: String
      candidates: Array<String>
    }
     
    
        constructor() {
            this.selectedPartyArray = this.parties.map(_ => 0); //working
            this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => 0); //has issues
          }
        
          selectedPartyArray: number[] = [];
          selectedPartyCandidate: number[][] = [];

.html file

<div *ngFor="let party of parties; index as index">
  <div class="column">
    <mat-form-field appearance="fill" style="max-width: 50px">
      <mat-label></mat-label>
      <mat-select (selectionChange)="preferenceChange($event, party)"  [(ngModel)]="selectedPartyArray[index]" name="preference">
        <mat-option
        *ngFor="let preference of party.preferences" 
        [value]="preference"
        >
        {{preference}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="column"></div>
  <div class="column">
    {{ party.party }}
  </div>
</div>

<p>
  <!-- Submit button -->
  <button mat-raised-button (click)="submit()">Submit</button>
</p>

<div class="flex-container">
  <div *ngFor="let mappedSenateCandidate of mappedSenateCandidates; index as index">
    <!-- <div class="column" *ngFor="let i = 1; i <= mappedSenateCandidate.length; i++">
      {{`${mappedSenateCandidate}_${i}`}}
    </div> -->
    <div>
      <div><b>{{mappedSenateCandidate.party}}</b></div>
      <div class="inner-flex-container" *ngFor="let candidate of mappedSenateCandidate.candidates; index as index1">
        <mat-form-field appearance="fill" style="max-width: 50px">
          <mat-select [(ngModel)]="selectedPartyCandidate[index][index1]" name="preference">
            <mat-option
              *ngFor="let preference of senateCandidatePrefereneList"
              [value]="preference"
              >{{ preference }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        {{candidate}}
        <div></div>
      </div>
    </div>
  </div>
</div>

Solution

this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => 0);

this.mappedSenateCandidates.map(_ => 0) will create an array of numbers, but this.selectedPartyCandidate expects an array of arrays, so you can't assign an array of numbers to it. If you want to assign an array of empty arrays, do this:

this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => []);

If you want the sub arrays to have a single 0 in it, then do this:

this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => [0]);

If you want the sub arrays to have as many 0's as the original subarray has elements, then do this:

this.selectedPartyCandidate = this.mappedSenateCandidates.map(
  subArray => subArray.map(_ => 0)
);

---

Alternatively, if you do want a single-dimensional array of numbers, then change the type on this.selectedPartyCandidate:

selectedPartyCandidate: number[] = [];

Answered By - Nicholas Tower