Angular项目数组长度显示异常 *ngFor循环生成重复卡片如何解决

你当前的代码将*ngFor指令绑定在了卡片外层div上，该指令的作用是遍历数组，每遍历到一个元素就渲染一次绑定的宿主元素，所以数组有多少个元素就会生成多少张卡片。 #

方案适配场景说明 #

你当前的卡片是人寿与健康类保单的总览卡片，仅需展示总数量，且同类型保单的LobDsc字段值一致，直接调整HTML模板即可：

<!-- 移除card容器上的*ngFor指令，加ngIf判断数组非空时才渲染卡片 -->
<div class="card" *ngIf="filterLifePolicies?.length">
    <!-- 路由参数直接取数组第一个元素的LobDsc，加可选链避免数组为空时报错 -->
    <a [routerLink]= "['/contracts', filterLifePolicies[0]?.LobDsc]"
      routerLinkActive="active" class="noLinksDecoration">
    <div class="card-body text-center">
      <img src="../../assets/images/Component62_1.svg"> 
      <p class="policyTitle">Ζωή & Υγεία</p>
      <!-- countLife已经在TS中赋值为数组长度，可直接使用 -->
      <p class="counter">{{countLife}}</p>
    </div>
    </a>
</div>

兼容低版本Angular的写法 #

如果你使用的Angular版本低于12，不支持可选链语法，可替换为显式判空逻辑：

<div class="card" *ngIf="filterLifePolicies.length > 0">
    <a [routerLink]= "['/contracts', filterLifePolicies[0].LobDsc]"
      routerLinkActive="active" class="noLinksDecoration">
    <!-- 卡片内部内容保持不变 -->
    </a>
</div>

特殊场景补充（可选） #

如果跳转时需要传递该类型下所有保单的LobDsc，可将参数改为逗号拼接的字符串，路由接收时再拆分即可：

<a [routerLink]= "['/contracts', filterLifePolicies.map(item => item.LobDsc).join(',')]"

TS代码无需调整 #

你已经在接口返回逻辑中正确计算了countLife = this.filterLifePolicies.length，该部分逻辑可以直接保留。

内容的提问来源于stack exchange，提问作者Andreas V