Цикл с элементом через различные массивы

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>

Answer 1

вы можете создать вспомогательный массив:

  let auxArray = [];
  for (let i; i <= Math.max(diagnoses.length); labValues.length, i++) {
     auxArray.push( {"index": i} );
  }

Затем в вашем * ngFor итерируйте auxArray и с индексом покажите соответствующие диагнозы или labValues ​​(проверьте наличие неопределенности, чтобы уменьшить различия в массиве. Длина)

Answer 2

Итак, у вас есть 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 более понятным.