typescript Angular 显示ngFor的上一个和下一个值

0yg35tkg 于 2023-01-27 发布在 TypeScript

关注(0)|答案(2)|浏览(139)

bounty将在7天后过期。回答此问题可获得+100声望奖励。rameez khan希望引起更多人关注此问题。

我有一个简单的ngFor，在其中我这样显示title

title = ["t1", "t2", "t3", "t4" "t5", "t6"];

        <div *ngFor="let x of work; let i = index" (click)="changeindex(i)">
            <div>
                {{x.title}}
            </div>
        </div>

我需要做的是在ngFor中，它将只显示t1、t2和t3。一旦我单击t3，它将显示t2、t3和t4。表示1个上一个阵列和1个下一个阵列。如果我单击t2，它将显示t1、t2和t3

typescript

来源：https://stackoverflow.com/questions/74149723/angular-show-previous-and-next-value-by-ngfor

2条答案

按热度按时间

0md85ypi1#

对于获取上一个值：title[i-1];和对于下一个值：title[i+1];
示例：在TS文件中：

changeindex(i) {
    const previousVaule  = title[i-1];
    const Next Value = title[i+1];
    const CurrentValue = title[i];

    // your nessseary code
}

赞(0）回复(0）举报 2023-01-27

w1jd8yoj2#

我只使用*ngFor/*ngIf的组合。
如果要避免模板中不必要的div，请使用<ng-container>

<ng-container *ngFor="let x of work; let i = index" >
  <div *ngIf="i >= selected -1 && i <= selected+1" (click)="selected = i">
    <div>
      {{x.title}}
    </div>
  </div>
</ng-container>

赞(0）回复(0）举报 2023-01-27

我来回答

typescript Angular 显示ngFor的上一个和下一个值

2条答案

相关问题

热门标签

最新问答