angular - 在 Angular 中的 html 文件上添加计数器

Question

我正在显示按名称和地址过滤的餐厅。 (如果没有给出名称或地址，则显示所有餐厅)。问题是我需要添加一个计数器来计算每个过滤器后剩余的餐厅或所有餐厅的数量(如果没有进行过滤)。

我使用的代码(完美运行):

(app-res-tabs是显示餐厅的组件)

  <div *ngFor="let res of restaurants;">

    <li
      *ngIf="(res.Name.toLowerCase().includes(searchString?.toLowerCase()) 
              || searchLength == false) 
              && (res.Address == printedOption || checked == false)"
      class="nav-item has-treeview menu-open">
      <a class="nav-link active">
        <app-res-tabs [res]="res"></app-res-tabs>
      </a>
    </li>

  </div>

如何在此代码中为餐厅添加柜台？

Answer 1

您可以将索引添加到*ngFor:

<div *ngFor="let res of restaurants; let i = index">
    <p> It is index of restaurants {{ i }} </p>
    <p> It is counter of restaurants {{ i + 1 }} </p>
</div>

更新:

您可以创建一个变量计数器:

counter = this.restaurants.length;

this.searchForm.controls['str'].valueChanges.subscribe((value) => {
  this.searchString = value;      
  this.counter = this.restaurants.filter(f => 
       f.Name.toLowerCase().includes(value.toLowerCase() 
       || this.searchLength == false) 
       && (f.Address == this.printedOption || this.checked == false)).length;
  if (this.searchString.length > 0) {
    this.searchLength = true;
  }
  else { this.searchLength = false }

});

HTML:

<div *ngFor="let res of restaurants; let k = index;">
    <!-- I want to show the count after this filter 
       (and the number of all restaurants if no filter is done) -->

    <li *ngIf="(res.Name.toLowerCase().includes(searchString?.toLowerCase()) 
        || searchLength == false) 
        &&(res.Address == printedOption || checked == false)"
        class="nav-item has-treeview menu-open">        
    <p>counter: {{ counter }}</p>
        <a class="nav-link active">
            <div>{{res.Name}}</div>
        </a>
    </li>
</div>

A work example at stackblitz.com