Angular ngFor 索引序列号答案

【问题标题】：Angular ngFor index serial numberAngular ngFor 索引序列号
【发布时间】：2020-12-10 13:31:26
【问题描述】：

我有一个包含国家和城市名称的项目列表，如下所示，我想在列表中显示特定类型项目的序列号。

items = [
    {'type': 'Country', 'title': 'Armenia',  },
    {'type': 'City', 'title': 'Kapan'   },
    {'type': 'City', 'title': 'Goris'   },
    {'type': 'City', 'title': 'Hats’avan' },

    
    {'type': 'Country', 'title': 'Angola'  },
    {'type': 'City', 'title': 'Catabola'  },
    {'type': 'City', 'title': 'Camacupa' },
    {'type': 'City', 'title': 'Caluquembe'  },

    {'type': 'Country', 'title': 'Argentina'  },
    {'type': 'City', 'title': 'San Vicente'  },
    {'type': 'City', 'title': 'Santa Elena'  },
    {'type': 'City', 'title': 'Retiro'  },
  ];


<div>
    <p *ngFor="let item of items; let i=index;">
        <b>{{i+1}}.</b>&nbsp;&nbsp;{{item.title}} &nbsp; ({{item.type}})
    </p>
</div>

它是这样显示的：

1.  Armenia   (Country)

2.  Kapan   (City)

3.  Goris   (City)

4.  Hats’avan   (City)

5.  Angola   (Country)

6.  Catabola   (City)

7.  Camacupa   (City)

8.  Caluquembe   (City)

9.  Argentina   (Country)

10.  San Vicente   (City)

11.  Santa Elena   (City)

12.  Retiro   (City)

但我想这样显示：（序列号应该只显示城市名称）

    Armenia   (Country)

1.  Kapan   (City)

2.  Goris   (City)

3.  Hats’avan   (City)

    Angola   (Country)

4.  Catabola   (City)

5.  Camacupa   (City)

6.  Caluquembe   (City)

    Argentina   (Country)

7.  San Vicente   (City)

8.  Santa Elena   (City)

9.  Retiro   (City)

这是我尝试过的stackblitz

https://stackblitz.com/edit/angular-serial-number-dynamic-conditional?file=src/app/app.component.html

【问题讨论】：

标签： html angular typescript

【解决方案1】：

您没有那个“串行”属性。所以虽然你可以这样做：

<b *ngIf="item.type == 'City'" >{{i+1}}.</b>

它将显示索引，而不是我认为在这里更正确的术语“排名”。

相反，您想要的似乎更多是调用一个函数并使用该值：

 ngAfterViewInit(){
   this.lastRank = -1;
 }

  getNextRank(){   
    this.lastRank++;   
    return this.lastRank;
  }

ts：

<b *ngIf="item.type == 'City'"> {{getNextRank()}} </b>

虽然这让你更接近，但它在 Angular 中存在一些基本问题。我不会这样做，即使它作为 Angular 的新人“有意义”。

相反，更好的方法是使用 Hidden，但将正确的属性推送到数组中：

import { AfterViewChecked, AfterViewInit,  Component, OnInit,  VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  

 ngAfterViewInit(){
   let lastRank = 0;

   this.items.forEach(e => {
    if(e.type == "City"){
      lastRank++;
      e.cityRank = lastRank;
    }
   });
 }


  items: Place[] = [
    { type: "Country", title: "Armenia" },
    { type: "City", title: "Kapan" },
    { type: "City", title: "Goris" },
    { type: "City", title: "Hats’avan" },

    { type: "Country", title: "Angola" },
    { type: "City", title: "Catabola" },
    { type: "City", title: "Camacupa" },
    { type: "City", title: "Caluquembe" },

    { type: "Country", title: "Argentina" },
    { type: "City", title: "San Vicente" },
    { type: "City", title: "Santa Elena" },
    { type: "City", title: "Retiro" }
  ];
}

export class Place 
{
  type: string;
  title: string;
  cityRank?: number;
}

还有 HTML：

<div>
  <p *ngFor="let item of items; let i=index;">
    <b [hidden]="item.type=='Country'"> {{item.cityRank}} </b>
  &nbsp;&nbsp;{{item.title}} &nbsp; ({{item.type}})
  </p>
</div>

updated stackblitz

结果：

【讨论】：

在“ngAfterViewInit”事件而不是“ngOnInit”事件中添加增量逻辑的任何特殊原因？
@VimalPatel 根本没有！

【解决方案2】：

方法一：

有很多方法可以隐藏序列号。最简单的是添加[hidden] 属性以在项目类型为国家/地区时隐藏它。如下所示。

[hidden]="item.type=='Country'"

方法2：

如果您想保持缩进相同，请创建一个如下所示的类名 hide，如果条件为真，则使用 ngClass 应用该类。

.hide {
  visibility: hidden;
}

<b [ngClass]="{'hide':item.type=='Country'}">

【讨论】：

不，序列号跳过国家序列号
所以你不想跳过数字？

【解决方案3】：

这里是解决方案添加了一个新的getter


  get __items() {
    let i = 0;
    let newItem: { type: string; title: string; counter: number };
    return this.items.map(item => {
      if (item.type === "City") {
        i++;
      }
      newItem = Object.assign({}, item, { counter: i });
      return newItem;
    });
  }

在模板中使用

<div>
    <p *ngFor="let item of __items">
        <b *ngIf="item.type==='City'">{{item.counter}}.</b>&nbsp;&nbsp;{{item.title}} &nbsp; ({{item.type}})
    </p>
</div>

stackblitz 链接https://stackblitz.com/edit/angular-serial-number-dynamic-conditional-xsft3e

【讨论】：

Catabola 应该以 4 开头。而不是 5。似乎缺少 4..
已修复..请检查

【解决方案4】：

您可以使用ol html 标记并仅呈现li 标记内的城市。

<div>
    <ol style="list-style-type: decimal;">
        <ng-container *ngFor="let item of items">
            <li *ngIf="item.type === 'City'; else country">
                {{ item.title }}
            </li>
            <ng-template #country>
                {{ item.title }}
            </ng-template>
        </ng-container>
    </ol>
</div>

查看分叉的堆栈闪电战：

https://stackblitz.com/edit/angular-serial-number-dynamic-conditional-esgwc3?file=src/app/app.component.html

【讨论】：