Nano Hash - криптовалюты, майнинг, программирование

Отображение данных массива в 3 столбца с использованием angular2 и начальной загрузки

В моем компоненте angular2 я перечислил данные, и я хочу отобразить эти данные в 3 столбца, используя класс boostrap (col-md-4).

Например, у меня есть объект json, как показано ниже.

{
"menuList":[
    {"id":1,"sn":"nd","name":"Noodles"},
    {"id":2,"sn":"sd","name":"Salad"},
    {"id":3,"sn":"sp","name":"Soup"},
    {"id":4,"sn":"fb","name":"Fresh Bowl"},
    {"id":5,"sn":"sn","name":"Snacks"},
    {"id":6,"sn":"pz","name":"Pizza"},
    {"id":7,"sd":"nd","name":"Sandwich"}
]

}

И я хочу отобразить имя в 3 столбца.

Лапша Салат Суп Свежая тарелка Закуски Сэндвич

Вот мой код, который я пробовал.

<div *ngFor="let menu of menuList; #i=index" *ngIf="i % 3 == 0" class="row">
    <div class="col-md-4">{{menu[$i].name}}</div>
    <div class="col-md-4">{{menu[$i + 1].name}}</div>
    <div class="col-md-4">{{menu[$i + 2].name}}</div>

But it display error, because first of all I cannot use ngFor & ngIf in a same element.

Пожалуйста, дайте мне решение.

javascript angular twitter-bootstrap-3
21.02.2017

  • 3x md-4 равняется полной строке. Все в порядке, когда вы просто выводите один ‹div class=col-md-4›{{menu.name}}‹/div› 21.02.2017

Ответы:


1

Чтобы отображать элементы в строках, вам не нужно фактически разделять строки, потому что 'col-md-4' разбивается на строки после 3 столбцов (как и ожидалось). Код ниже будет работать для вашего случая:

<div class="row">
  <div *ngFor="let menu of menuList" class="col-md-4">      
    {{menu.name}}
  </div>
</div>
21.02.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..