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。

角度5和6 * ng对于observable <any []>

1 个答案: