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

因此，您有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更清晰。

Answer 2

您可以创建一个辅助数组：

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

然后在您的* ngFor中，对auxArray进行迭代，并使用索引显示相应的诊断或labValues（检查未定义内容以缓解array.length差异）

通过不同的数组遍历元素

2 个答案: