Angular 10中使用*ngFor循环渲染图片时flex-grow属性失效问题咨询

问题根因 #

你使用*ngFor时给每个图片外层额外包裹了一层div，这层div才是.flex-container的直接子元素，你将flex属性绑定在内部的img标签上，flex布局不会识别非直接子元素的flex属性，因此样式失效。

解决方案 #

方案1：移除多余外层div（推荐，和硬编码结构完全一致）

直接将*ngFor指令绑定在img标签上，无需额外嵌套：

<div class="flex-container">
    <img *ngFor="let item of testFlexItems; let i = index" 
         [src]="item" 
         class="flex-item" 
         [style.flex]="getFlexStyle(i)"/>
</div>

方案2：保留外层div，将flex属性绑定到外层元素

如果业务需要保留外层div（比如要添加额外逻辑、事件绑定等），则将flex属性移到*ngFor所在的div上，同时补充对应样式：

<div class="flex-container">
    <div *ngFor="let item of testFlexItems; let i = index"
         [style.flex]="getFlexStyle(i)"
         class="flex-item-wrapper">
        <img [src]="item" class="flex-item"/>
    </div>
</div>

补充对应的css样式：

.flex-item-wrapper {
  height: 150px;
}
.flex-item {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

两种方案任选其一即可实现和硬编码完全一致的两端对齐填充效果。

内容的提问来源于stack exchange，提问作者Shoom Kloom