Javascript ngFor创建不需要的ng模板副本

我对ngFor指令有异议，我就是找不到解决办法：

<ng-container *ngIf="user.images.length > 0">
   <div *ngFor="let image of images">
        <img
           *ngIf="image.isProfileImage; else noImage"
           [src]="image.path"
        />
   </div>
</ng-container>
                    
<ng-template #noImage>
   <img src="https://someplaceholder.com"/>
</ng-template>

因此，如果图像是“配置文件图像”，请使用它。如果没有，请将模板与占位符图像一起使用。在某些情况下，如果阵列中有多个图像，但没有一个是配置文件图像，则会显示

ng模板

，但重复了很多次（按阵列中的图像数量）…，但应仅显示一次并“中断”循环

---

我是否遗漏了一些非常明显的东西？

没有办法打破ngFor循环。但是，有一种方法可以解决您的问题

您可以在组件中创建一个方法，该方法将在数组上循环并检查是否存在配置文件图像，然后您可以更改HTML并检查数组是否包含配置文件图像。如果没有，那么您可以只显示NGO模板

示例

containsProfileImage（）：布尔值{
让returnVal=false；
this.user.images.forEach（image=>{
if（image.isProfileImage）{
returnVal=true；
返回；
}
}
返回值；
}

编辑：替代解决方案

如回答所述。您还可以根据具有配置文件图像的图像过滤图像。这样，您可以检查过滤后的数组中是否至少有一个图像。如果没有，请显示

noImage

ngTemplate

get filteredImagesLength（）：编号{
返回user.images.filter（i=>i.isProfileImage）？.length；
}

什么能让它脱离循环？@Pointy我真的不知道，我对angular是个新手，所以我想可能会有一些模板内解决方案。代码按预期工作；要做你想做的事情，你需要编写你想做的代码。你可以使用

图像。一些（I=>I.isProfileImage）

要知道是显示ngFor还是NOIMAGE非常感谢，现在我更清楚该怎么做了。第一个解决方案已经奏效（需要用return替换break），第二个解决方案在HTML中包含filter（）等错误，仅供参考