时间戳

首页 > 解决方案 > ngFor 查找第一个和最后一个以及总索引

angular - ngFor 查找第一个和最后一个以及总索引

问题描述

我的 json 是这样的 [{score: 9},{score: 8.5}]

我只想显示第一个和最后一个分数。如果我有超过 2 个对象，下面的效果很好。

<!-- first score -->
<div class=""  *ngFor="let fs of score  ; index as j; first as isFirst">
                    <div class="row m-row--no-padding align-items-center" *ngIf="isFirst">
                  <div> {{fs.score}}  <---- first Div
                  </div>

<!-- last score -->
<div class="" *ngFor="let ls of score  ; index as i; last as isLast">
                  <div class="row m-row--no-padding align-items-center"  *ngIf="isLast">
                  <div> {{ls.score}}   <---- last Div
                  </div>

如果我的 json 只有一个对象

[{score: 9}]

它在第一个和最后一个 div 中重复相同的值。这是合乎逻辑的。但我想避免重复。有没有办法找出总索引然后打印第一个和最后一个或任何其他方式

如果只有一个对象，基本上要避免在 div 中重复值

标签： angular

解决方案

你的方法远非有效。无论集合的大小如何，您都将迭代它的所有元素，尽管您总是知道数组中的哪些位置对您来说是有趣的。此外，您使用当前模板执行此操作两次。

为什么不事先简单地执行这两个值的查找/提取？IMO 更好的方法是简单地执行以下操作：

interface Foo {}

private _entries: Foo[] = [];
// set-get approach used in order to force the update of the direct references 
// whenever the collection value is set
set entries(v: Foo[])
{
 this._entries = [...v];
 this.updateElements(v);
}
get entries(){return this._entries;}

firstElement: Foo;
lastElement: Foo;

private updateElements(v: Foo[]){
   const length = v.length;
   if(length  === 0){
     this.firstElement = null;
     this.lastElement = null;
   }else{
     this.firstElement = v[0];
     this.lastElement = v[length -  1];
   }
}

<div class="row m-row--no-padding align-items-center"  *ngIf="firstElement">
   <div> {{firstElement.score}}</div>
</div>
<div class="row m-row--no-padding align-items-center"  *ngIf="lastElement && lastElement 
 !== firstElement">
   <div> {{lastElement.score}}</div>
</div>

推荐阅读