У меня есть 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>
Вы не можете зацикливать два массива одновременно в *ngFor ..
Объедините два массива в один массив в коде структуры данных angular.
Массивы совершенно разные



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Итак, у вас есть 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 более понятным.
вы можете создать вспомогательный массив:
let auxArray = [];
for (let i; i <= Math.max(diagnoses.length); labValues.length, i++) {
auxArray.push( {"index": i} );
}
Затем в вашем * ngFor выполните итерацию auxArray и с помощью индекса покажите соответствующие диагнозы или labValues (проверьте undefined, чтобы уменьшить различия в array.length)
есть ли у этих двух массивов какие-либо общие свойства? например должен ли каждый диагноз иметь лабораторную ценность? Если да, то я, вероятно, объединю labValue с их соответствующим элементом диагностики.