如何修复打字稿中二维数组的映射

Question

我正在使用 angular。下面是打字稿和 html 代码。在打字稿代码中，第 this.selectedPartyCandidate = this.mappedSenateCandidates.map(_ => 0); //has issues 行有错误。但它在一维数组中工作正常：this.selectedPartyArray = this.parties.map(_ => 0); //working。我该如何解决这个多维数组问题？

错误：类型 'number[]' 不可分配给类型 'number[][]'。类型 'number' 不可分配给类型 'number[]'.

.ts 文件

 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 文件

<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>

Answer 1

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

this.mappedSenateCandidates.map(_ => 0) 将创建一个数字数组，但 this.selectedPartyCandidate 需要一个数组数组，因此您不能为其分配一个数字数组。如果你想分配一个空数组的数组，这样做：

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

如果你希望子数组中只有一个 0，那么这样做：

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

如果您希望子数组中的 0 与原始子数组中的元素一样多，请执行以下操作：

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

或者，如果您确实需要 single-dimensional 数字数组，请更改 this.selectedPartyCandidate 上的类型：

selectedPartyCandidate: number[] = [];

如何修复打字稿中二维数组的映射

How to fix a mapping of two dimensional array in typescript

angular

typescript

multidimensional-array