How to fix a mapping of two dimensional array in typescript-CodePudding

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 >
    <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 ></div>
  <div >
    {{ party.party }}
  </div>
</div>

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

<div >
  <div *ngFor="let mappedSenateCandidate of mappedSenateCandidates; index as index">
    <!-- <div  *ngFor="let i = 1; i <= mappedSenateCandidate.length; i  ">
      {{`${mappedSenateCandidate}_${i}`}}
    </div> -->
    <div>
      <div><b>{{mappedSenateCandidate.party}}</b></div>
      <div  *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>

CodePudding user response：

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[] = [];