Question

我正在使用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>

我得到error that the property 'name' cannot be found.我认为是因为我使用了错误的语法。

这样做的方法是什么？

Answer 1

将您的*ngIf更改为：

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

因为加载第一个项目时i==0，所以games[i-1]为undefinded并且它会引发错误。

Answer 2

在你的*ngIf中你应该改变：
firstLetter(game[i-1].name)
到
firstLetter(games[i-1].name)

通知game到games。

您现在使用firstLetter(game[i-1].name)做的是，您正在尝试访问不存在的GameView - 对象（game）属性[i-1]。< / p>

但如果将其更改为firstLetter(games[i-1].name)，您将从索引GameView的{{1}} - 数组中获取games - 对象，然后才能获取该对象财产[i-1]。

您还必须检查name何时等于i，因为当0为games[i-1]时games[-1]为undefined，因为没有索引-1处的元素。所以@Duannx在他的回答中写道，你应该在i == 0 ||的开头添加*ngIf，如下所示：

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

如果使用i == 0时第一个语句（本例中为||）为truthy，则永远不会评估第二个语句，因此您永远不会尝试访问games[-1]

访问* ngFor中的第一个最后一项？

2 个答案: