javascript - 循环遍历不同数组的元素

Question

我有 2 个数组（诊断和 labValues）。我想只用一个元素（刷卡）遍历两个数组。每个数组都有完全不同的结构，因此我尝试使用 ngIf。

使用我目前的方法，我没有得到任何 labValues 并且 ngIf 也不起作用。这种方法感觉很丑。有没有更简单的方法来做到这一点。

  <div class="card-container">
    <sc-card padding *ngFor="let diagnose of diagnoses; let labValue of labValues"
    [orientation]="cardDirection"
    [tinder-card]="cardOverlay"
    [callDestroy]="diagnose.destroyEvent"
    [callLike]="diagnose.likeEvent"
    (onLike)="onCardInteract($event)">
    <div class="card-header">
      <ion-icon *ngIf="diagnose" class="clusterIcon" name="medkit"></ion-icon>
      <ion-icon *ngIf="labValue" class="clusterIcon" name="ios-flask"></ion-icon>
      <ion-badge *ngIf="diagnose" class="icdBadge">ICD: {{diagnose.additionalParameters.uniqueId}}</ion-badge>
      <ion-badge *ngIf="labValue" class="icdBadge" color="{{labValue.additionalParameters.interpretation}}">{{labValue.additionalParameters.interpretation | translate }}</ion-badge>
      <span *ngIf="diagnose" class="coveredText">'{{diagnose.coveredText}}'</span>
      <span *ngIf="labValue" class="coveredText">'{{labValue.coveredText}}'</span>
    </div>
    <div class="card-content">
      <span *ngIf="diagnose.additionalParameters.dictCanon" class="sectionHeader">{{"GeneralDiagnosis" | translate }}</span>
      <span *ngIf="diagnose.additionalParameters.dictCanon">{{diagnose.additionalParameters.dictCanon}}</span>

      <span *ngIf="labValue" class="sectionHeader">{{"GeneralLabValue" | translate }}</span>
      <span *ngIf="labValue">{{labValue.additionalParameters.parameter.additionalParameters.dictCanon}}</span>

      <span class="sectionHeader">{{"Explanation" | translate }}</span>
    </div>
    <div class="card-footer">
      <span class="swipeText">{{"swipeResult" | translate }}</span>
      <ion-icon class="swipeLeft" name="ios-thumbs-down"></ion-icon>
      <ion-icon class="swipeRight" name="ios-thumbs-up"></ion-icon>
    </div>
     </sc-card>
  </div>

标签： javascriptangular

Answer 1

因此，您有 2 个数组，其中包含 2 个略有不同的对象。

我会为您的卡片创建一个新数组，其中包含（尽可能）一个标准对象：

let cardArray = diagnoses.map(diag => { type: 'diagnose', 
          ICD: diag.additionalParameters.uniqueId,
          coveredText: diag.coveredText }) // etc... map all your properties
     .concat(labValues.map(labVal => { type: 'labvalue',
          interpretation: labVal.additionalParameters.interpretation,
          coveredText: labVal.coveredText })) // etc... map all your properties

现在你可以循环你的新cardArray数组并使你的 HTML 更清晰。