Возникла проблема при отображении сервисных данных в сетке - PullRequest
Новая
       25

Возникла проблема при отображении сервисных данных в сетке

0 голосов
/ 11 января 2019

Я работаю над проектом Angular, где у меня проблема с отображением данных Возникшая проблема в при отображении данных , поступающих из службы , в три строки динамически точно так же, как вид сетки начальной загрузки например: 

 <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
     <div class="col-md-4"></div>
  </div>

Я помещаю свой HTML-код ниже - 

                <div class="container" *ngFor="let match of upcommingMatch; let i = index">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="match_section">
                        <h3>{{match.tournamentName}}</h3>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                              <div class="country_image">
                                <img src="{{match.team1PhotoUrl}}"/>
                              </div>
                              <p class="country_name">{{match.team1Name}}</p>
                            </div>
                            <div class="col-md-4">
                              <div class="vs">
                                <img src="../../assets/imgs/vs.png"/>
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="country_image">
                                <img src="{{match.team1PhotoUrl}}" />
                              </div>
                              <p class="country_name">{{match.team2Name}}</p>
                            </div>
                          </div>
                          <p class="time">67h  59m  13s</p>
                          <a>Join</a>
                      </div>
                    </div>

подробнее: Я использую угловой материал

Я хочу : для отображения данных ниже Изображение

enter image description here

Но мои текущие данные отображаются так -:

enter image description here (.html part)

1 Ответ

0 голосов
/ 14 января 2019

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

...
<div class="col-md-4 col-md-offset-4">
    <div class="country_image">
        <img src="{{match.team1PhotoUrl}}"/>
    </div>
    <p class="country_name">{{match.team1Name}}</p>
</div>
...

Здесь добавляется col-md-offset-4 ... т.е. я получаю столбец шириной в 4 квадрата сетки, но смещаю его на 4 квадрата сетки слева. Строка начальной загрузки должна состоять из столбцов шириной 12 квадратов сетки:

Смещение 4 + Содержимое 4 + Оставшееся пространство 4 === 12.

В противном случае столбцы плавают рядом.

...