Ng-контейнер, заставляющий содержимое нарушать вид сетки начальной загрузки - PullRequest
Новая
       16

Ng-контейнер, заставляющий содержимое нарушать вид сетки начальной загрузки

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

Я использую angular / animations в моих асинхронных данных из магазина.Я следил за статьей, и парень использовал асинхронный контент внутри ng-контейнера.Без него мой контент работает нормально с 4 картами подряд.Но ng-container заставляет их быть одной картой на линию.Это код без ng-контейнера и анимации, который отлично работает и отображает по 4 карты в строке на средних и больших экранах. 

<div *ngFor="let project of projects | async" class="col-xs-12 col-md-3">
      <div class="card border-success mb-3">
        <div class="card-header-custom" [ngStyle]="{'background-color': project.colorCode}"></div>
        <div class="card-body">
          <h6 class="card-title">{{project.name}}</h6>
          <div class="row mt-5">
            <div class="col text-left">
              <img src="../../assets/images/image.jpg" class="people" id="firstImg">
              <img src="../../assets/images/image2.jpg" class="people" id="secondImg">
              <img src="../../assets/images/image3.jpg" class="people" id="thirdImg">
            </div>
            <div class="col text-right">{{project.taskKey}} Tasks</div>
          </div>
          <p class="card-text"></p>
        </div>
      </div>
    </div>

А этот код с анимацией и контейнером заставляет карты бытьпо одному на строку. 

<ng-container *ngIf='projects | async as projectsFromContainer'>
      <div [@listStagger]='projectsFromContainer.length'>

        <div *ngFor="let project of projectsFromContainer" class="col-xs-12 col-md-3">
          <div class="card border-success mb-3">
            <div class="card-header-custom" [ngStyle]="{'background-color': project.colorCode}"></div>
            <div class="card-body">
              <h6 class="card-title">{{project.name}}</h6>
              <div class="row mt-5">
                <div class="col text-left">
                  <img src="../../assets/images/image.jpg" class="people" id="firstImg">
                  <img src="../../assets/images/image2.jpg" class="people" id="secondImg">
                  <img src="../../assets/images/image3.jpg" class="people" id="thirdImg">
                </div>
                <div class="col text-right">{{project.taskKey}} Tasks</div>
              </div>
              <p class="card-text"></p>
            </div>
          </div>
        </div>

      </div>
    </ng-container>

Изображение

...