使用 *ngFor 获取下一个迭代值答案

【问题标题】：Get Next Iteration Value with *ngFor使用 *ngFor 获取下一个迭代值
【发布时间】：2018-04-30 20:32:35
【问题描述】：

我试图在控制器中获取 *ngFor 循环中下一次迭代的值：

模板：

<p *ngFor="let history of histories; let i=index; "
[ngClass]="{'show':history.date==dateseeing}">
    <span class="history-date">{{ history.date }}</span>
    <span class="history-txt">{{ history.txt }}</span>
    <mat-icon 
        *ngIf="history.date==dateseeing"
        (click)="readNext(history[i+1])">keyboard_arrow_down
    </mat-icon></p>

控制器：

public readNext(history) {
console.log(history);
const date = history.date;
this.dateseeing = date;}

做不出来

【问题讨论】：

你不能那样做。这是一个forOf 循环。考虑 C# 中的 foreach，它的工作原理是这样的。

标签： angular indexing ngfor

【解决方案1】：

如果我没看错，试试这个：

<p *ngFor="let history of histories; let i=index; "
[ngClass]="{'show':history.date==dateseeing}">
    <span class="history-date">{{ history.date }}</span>
    <span class="history-txt">{{ history.txt }}</span>
    <mat-icon 
        *ngIf="history.date==dateseeing"
        (click)="readNext(histories[i+1])">keyboard_arrow_down
    </mat-icon></p>

您不能这样做 history[i]，因为历史记录是您从数组中获取的项目，并且您想从 histories 数组中访问第二项

【讨论】：

很好，很高兴它有帮助