0

在 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;
4

1 回答 1

0

您可以执行以下操作，考虑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>

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

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

于 2021-10-15T14:44:10.797 回答