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

Question

您好，我正在使用 Angular 6.

开发网络应用程序

我的网络应用程序链接到一个 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 文件中对显示此警报标记列表的组件进行切片。我不知道如何拼接一个 observable 数组或如何将其转换为数组。如果这是一个好方法，也许我需要此文件中的帮助。

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

A negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence.

所以只需使用 slice:-6.

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

Angular 5 & 6 *ngFor last nth element of observable<any[]>

javascript

ngfor

angular