*ng 用于 flexbox 行方向

Question

在Angular5中，*ngFor在列方向而不是行方向生成<div>个元素：

html:

    <div class="charts"  *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn"
          style="padding-top: 0.5em">
          <div class="item">
            <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
            </span>
          </div>
    </div>

css:

    .charts{
      display: flex;
     flex-direction: row;
    }

    .item{
      display: flex;
      flex: 1
    }

如何将其更改为所有元素都在同一行中？

谢谢

Answer 1

您需要将 *ngFor 添加到您的 item，而不是 charts:

<div class="charts" style="padding-top: 0.5em">
  <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
    <span style="background-color: rgb(127, 140, 255); height:120px;">
      number {{i}}
    </span>
  </div>
</div>

_{附带说明一下，不要使用那样的内联样式。那些需要移动到组件 css 文件}

Answer 2

你应该重新排列为

<div class="charts" style="padding-top: 0.5em">
      <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
        <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
        </span>
      </div>
</div>

display: flex; flex-direction: row; 应该在父 div

上

*ng 用于 flexbox 行方向

*ngFor flexbox row direction

angular

flexbox

ngfor