Angular 是否访问*ngFor中的最后一项？

我正在使用Ionic开发一个个人应用程序，我试图通过检查每个游戏的第一个字母为游戏列表创建一个按字母顺序排列的标题/分隔符，如果第一个字母与最后一个游戏的第一个字母不同（它们是按顺序排列的），则生成一个标题

下面是我的firstLetter（）函数：

public firstLetter(name: any) {
    return name.charAt(0);
}

这是我的HTML/ng：

<ion-item-group *ngFor="let game of games; let i = index;">
        <ion-item-divider color="light" *ngIf="firstLetter(game.name) != firstLetter(game[i-1].name)">{{firstLetter(game.name)}}</ion-item-divider>
        <ion-item (click)="openGameSummary(game)">
          <h2>{{game.name}}</h2>
        </ion-item>
      </ion-item-group>

{{第一个字母（游戏名称）}
{{game.name}

我收到一个

错误，无法找到属性“name”。

我认为这是因为我使用了错误的语法

---

怎么做？

在您的

*ngIf

中，您应该更改：

第一个字母（游戏[i-1]。名称）

到

第一个字母（游戏[i-1]。名称）

注意

game

至

games

您现在使用

firstLetter（游戏[i-1].name）

所做的是尝试访问不存在的

GameView

-objects（

game

）属性

[i-1]

但是如果您将其更改为

firstLetter（games[i-1].name）

，您将从索引

[i-1]

处的

GameView

-数组中获取

GameView

-对象，然后能够获取该对象属性

name

您还必须检查

i

何时等于

0

，因为当它是

游戏时[i-1]

将是

游戏[-1]

，这是

未定义的

，因为索引

-1

处没有元素。因此，正如@duanx在他的回答中所写，您应该在

*ngIf

的开头添加

i==0 |

，如下所示：

*ngIf="i == 0 || firstLetter(game.name) != firstLetter(games[i-1].name)"

---

如果第一条语句（在本例中为

i==0

）是在使用

|

时，则第二条语句将永远不会被计算，因此您将永远不会尝试访问

游戏[-1]

将

*ngIf

更改为：

*ngIf="i==0 || firstLetter(game.name) != firstLetter(games[i-1].name)"

---

因为加载第一个项目时，

i==0

，所以

games[i-1]

是

undefinded

，并抛出错误

你的游戏是物体还是阵列？游戏[i-1]。名称？它是一个对象。。。所以是的，游戏[i-1]不起作用。不知道我的解决方案是什么。你能展示一下你的游戏数组是如何定义的吗？游戏：数组=[]，其中游戏视图被定义为

导出类游戏视图{gameid:number，name:string，等等。}

我想你想把

第一个字母（游戏[I-1].name）

改为

第一个字母（游戏[I-1].name）

在您的

*ngIf

中。听起来不错。我很有信心这会奏效。。。当我有机会测试时，我会让你知道并标记这个，如果它有效的话。