angular - Ng-container 强制内容破坏引导网格视图

Question

我正在对来自 firestore 的异步数据使用角度/动画。我关注了一篇文章，这个人在 ng-container 中使用了异步内容。如果不使用它，我的内容可以连续使用 4 张卡片。但是 ng-container 强制它们是每行单卡。这是没有 ng-container 和动画的代码，可以正常工作并在中大屏幕上每行渲染 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>

图片