Angular 5 & 6 *ngFor observable<any[]的最后n个元素>

Question

你好，我正在使用Angular 6开发一个Web应用程序。

我的网络应用链接到 Firebase 数据库，从中我可以获取对象列表。 在我的登录页面上，我想显示该列表中的最后 6 个对象。 我让它使用管道处理前 6 个，但我无法找到获得最后 6 个的解决方案。

<ul>
<div *ngFor="let course of coursesObservable | async | slice:0:6">
<ngb-alert type="info" [dismissible]="false">
<div class="row">
<div class="column">
<img src="{{course.file}}">
</div>
<div class="column">
<h3><a href="#">{{course.name}}</a> </h3>
</div>
</div>
</ngb-alert> 
</div>
</ul>

上面的 HTML 片段显示了我如何让它与前 6 个元素一起工作。 我尝试执行以下操作：

<div *ngFor="let course of (coursesObservable | async | slice:coursesObservable.length-6:coursesObservable.length-1);">

但什么也没发生。我的Chrome控制台中也没有收到任何错误消息。结果是根本不显示任何事件。

我还尝试跟踪索引，并且仅在索引等于或大于列表长度 - 6 时才生成我的标签。因此，如果长度为 50，则仅在 44+ 时生成。

<div *ngFor="let course of coursesObservable | async | let i=index;">
<ngb-alert *ngIf="i >= coursesObservable.length-6" type="info" [dismissible]="false">

这会在我的控制台中生成错误。

Uncaught Error: Template parse errors:
Parser Error: Unexpected token = at column 48 in [let course of 
coursesObservable | async | let i=index;] in 
ng:///AppModule/DummyListComponent.html@1:7 ("<ul>
<div [ERROR ->]*ngFor="let course of coursesObservable | async | let 
i=index;">
<ngb-alert *ngIf="i >= courses"): 
ng:///AppModule/DummyListComponent.html@1:7
The pipe 'let' could not be found ("<ul>

我已经考虑在我的 TypeScript 文件中对显示此警报标签列表的组件进行切片。我不知道如何拼接可观察数组或如何将其转换为数组。如果这是一个好方法，也许我需要此文件中的帮助。

import { Component, OnInit } from '@angular/core';
// Firebase
import { AngularFireDatabase } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'dummy-list',
templateUrl: './dummy-list.component.html',
styleUrls: ['./dummy-list.component.css']
})
export class DummyListComponent implements OnInit {
coursesObservable: Observable<any[]>;
events: any[];
constructor(private db: AngularFireDatabase) { }
ngOnInit() {
this.coursesObservable = this.getDummy('/events');
}
getDummy(listPath): Observable<any[]> {
return this.db.list(listPath).valueChanges();
}
}

Answer 1

来自 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

可以使用负索引，指示与序列末尾的偏移量。slice(-2)提取序列中的最后两个元素。

所以只需使用slice:-6.