正确显示数组长度的问题

Question

在 Angular 项目中，我想循环访问 filterLifePolicies 数组，因为我想通过 URI 传递 LobDsc 属性。

问题是我还想将数组的长度作为数字输出，但是因为如果数组包含例如，我会遍历每个元素。 3 个对象，3 张卡片显示...我只想要一张编号为 3 的卡片（数组长度）。

HTML：

<div class="card" *ngFor="let policy of filterLifePolicies">
    <a [routerLink]= "['/contracts', policy.LobDsc]"
      routerLinkActive="active" class="noLinksDecoration">
    <div class="card-body text-center">
      <img src="../../assets/images/Component62_1.svg"> 
      <p class="policyTitle">Ζωή & Υγεία</p>
      <p class="counter">{{countLife}}</p>
    </div>
    </a>
  </div>

打字稿的一部分：

getCustomerPolicies () {

    this.http.get<any>('http://localhost:8080/o/mye/pol').subscribe({
    next: res => {  

    this.filterLifePolicies = res.Life.Policies;
    console.debug(this.filterLifePolicies);
    this.countLife = this.filterLifePolicies.length;

Answer 1

您可以执行以下操作，考虑为 countLife 变量分配了所需的值。

<div class="card">
  <ng-container *ngFor="let policy of filterLifePolicies; index as i">
    <a *ngIf="i < 1" [routerLink]="['/contracts', policy.LobDsc]" routerLinkActive="active" class="noLinksDecoration">
      <div class="card-body text-center">
        <img src="../../assets/images/Component62_1.svg">
        <p class="policyTitle">Ζωή & Υγεία</p>
      </div>
    </a>
  </ng-container>
  <p class="counter">{{countLife}}</p>
</div>

在上面的代码 sn-p 中，ng-container 用于迭代 filterLifePolicies 以访问 LobDsc 值。由于迭代不应创建具有 CSS 类 card-body 的重复 HTML div 元素，因此正在使用通过 ngIf 的附加检查来检查 index 值，使其始终小于 1。

虽然如果LobDsc 的值对于filterLifePolicies 的所有值都相同，推荐的方法是通过点表示法获取其值并将其存储在一个变量中，该变量以后可以直接绑定到您的模板在运行时。