Блог

Главная - Вопросы по программированию - Отображать данные в 2 столбцах в зависимости от условия

Отображать данные в 2 столбцах в зависимости от условия

#html #css #angular #bootstrap-4

#HTML #css #angular #bootstrap-4

Вопрос:

Я работаю над приложением angular. Я хочу отображать данные в 2 столбцах, но я хочу решить, в какой столбец поместить строку в соответствии с условием.

 <div class="row" *ngFor="let content of Content"> 
    <div class="col-md-6" *ngIf="content.group==='Date'">
        <div>{{content.title}}</div>
    </div>
</div>

Например, данные разделены на 2 группы: текст и дата. Я хочу поместить все данные, которые находятся в текстовой группе, в левый столбец, а данные, которые находятся в группе дат, в правый столбец.

Комментарии:

1. Вам нужно выровнять данные по группе, которая у них есть?

2. Да, я хочу, чтобы все данные, которые находятся в одной группе, были слева, а остальные в правом столбце

3. @AdelaM напишите CSS, какие столбцы вы хотите выровнять.

4. Пожалуйста, приведите пример ожидаемого выходного представления.

Ответ №1:

Пожалуйста, внесите некоторые изменения, чтобы получить точный результат:

 <div class="row"> 
    <div class="col-md-6">
        <div class="row" *ngFor="let content of Content">
          <div class="col-md-12" *ngIf="content.group==='Date'">{{content.title}}</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row" *ngFor="let content of Content">
         <div class="col-md-12" *ngIf="content.group==='Text'">{{content.title}}</div>
        </div>
    </div>
</div>

Я надеюсь, что это поможет.