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

У меня есть 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>

есть ли у этих двух массивов какие-либо общие свойства? например должен ли каждый диагноз иметь лабораторную ценность? Если да, то я, вероятно, объединю labValue с их соответствующим элементом диагностики.

Sajan 04.07.2018 14:18

Вы не можете зацикливать два массива одновременно в *ngFor ..

callback 04.07.2018 14:23

Объедините два массива в один массив в коде структуры данных angular.

Chris G 04.07.2018 14:25

Массивы совершенно разные

mm1975 04.07.2018 14:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
65
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 более понятным.

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

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

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

Другие вопросы по теме