I am currently working with Angular and facing an issue with multidimensional arrays in my typescript code. Specifically, the line
this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => 0); //has issuesthis.selectedPartyArray = this.parties.map(_ => 0); //workingError: 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>