Question

我使用角度CLI 6，angularfire2和firebase。

我用angularfire2过滤并显示我的数据。但是我有很多数据，我的表太长了，无法加载。因此，我想在limitToFirst()上使用getMedecins()

我遇到以下错误：

类型'AngularFireList'上不存在属性'limitToFirst'。

有人可以告诉我如何使用此功能？

 import { Injectable, Input } from '@angular/core';
    import { Subject } from 'rxjs/Subject';
    import * as firebase from 'firebase';
    import DataSnapshot = firebase.database.DataSnapshot;
    import { Observable, interval, pipe } from 'rxjs';
    import {switchMap, map} from 'rxjs/operators';


    import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

    @Injectable()
    export class AnnuairesService {

    medecins: AngularFireList<any>;

    constructor(private database: AngularFireDatabase) {this.medecins = database.list('annuaire');  }

    getMedecins() { return this.medecins.snapshotChanges().pipe(map(actions => {
      return actions.map(a => {
        const data = a.payload.val();
        const key = a.payload.key;

        return {key, ...data };
      });
    })); }

    }

还有我的组件：

Component.ts

    import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
    import { AnnuairesService } from '../services/annuaires.service';

    import { Subscription } from 'rxjs';
    import { Observable } from 'rxjs';
    import { Router } from '@angular/router';
    import { MatPaginator, MatTableDataSource } from '@angular/material';
    import { MatSort } from '@angular/material';
    import { DataSource } from '@angular/cdk/table';
    import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

    @Component({
      selector: 'app-med-list',
      templateUrl: './med-list.component.html',
      styleUrls: ['./med-list.component.scss']
    })

    export class MedListComponent   {

      Medecin = {
    IdentifiantPP: '',
    Prenom: '',
    Nom: '',
    Libellesavoir: '',
    Etablissement: '',
    Contact: ''  }

    displayedColumns = [
    'IdentifiantPP',
    'Prenom',
    'Nom',
    'Libellesavoir',
    'Etablissement',
    'Contact'
    ];

    dataSource = new MatTableDataSource();

    applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); 
        filterValue = filterValue.toLowerCase(); 
        this.dataSource.filter = filterValue;
        }

    @ViewChild(MatPaginator) paginator: MatPaginator;

    ngAfterViewInit() {this.dataSource.paginator = this.paginator;}


    ngOnInit(){ return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);
    }

    constructor( private annuairesService: AnnuairesService, private router: Router, private database: AngularFireDatabase) {} }

    export class PatientDataSource extends DataSource<any> {

    constructor(private annuairesService: AnnuairesService) { super() }

    connect() {return this.annuairesService.getMedecins();}
     disconnect() {}

    }

Component.html：

<div class="grid-container" >
    <mat-card>
    <mat-form-field appearance="outline"  >
      <input matInput (keyup)="applyFilter($event.target.value)"  >
        <mat-label>Rechercher un professionnel</mat-label>
    </mat-form-field>

    <div >

    <table mat-table  [dataSource]="dataSource"  class="mat-elevation-z8">

        <ng-container matColumnDef="IdentifiantPP">
        <th mat-header-cell *matHeaderCellDef> Code RPPS</th>
        <td mat-cell *matCellDef="let element">  {{element.IdentifiantPP}}</td>
      </ng-container>

      <ng-container matColumnDef="Prenom">
        <th mat-header-cell *matHeaderCellDef> Prénom </th>
        <td mat-cell *matCellDef="let element"  > {{element.Prenom}} </td>
      </ng-container>

      <ng-container matColumnDef="Nom">
        <th mat-header-cell *matHeaderCellDef> Nom </th>
        <td mat-cell *matCellDef="let element">  {{element.Nom}}</td>
      </ng-container>

      <ng-container matColumnDef="Libellesavoir">
        <th mat-header-cell *matHeaderCellDef> Spécialité</th>
        <td mat-cell *matCellDef="let element">  {{element.Libellesavoir}}</td>
      </ng-container>

        <ng-container matColumnDef="Etablissement">
        <th mat-header-cell *matHeaderCellDef> Etablissement</th>
        <td mat-cell *matCellDef="let element">  {{element.Etablissement}}</td>
      </ng-container>

       <ng-container matColumnDef="Contact">
        <th mat-header-cell *matHeaderCellDef> Contact</th>
        <td mat-cell *matCellDef="let element">  {{element.Contact}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" 

       ></tr>

       </table>    
     <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
           </div>

    </mat-card>
    </div>

Answer 1

尝试一下，它应该可以工作

  constructor(private database: AngularFireDatabase) 
    {
    this.medecins = database.list('annuaire',ref=>ref.limitToFirst(10)); 
     }

Answer 2

请尝试阅读下面的文档和代码格式：-

database.list('/annuaire', ref => ref.orderByChild('size').equalTo('large')).limitToFirst(10)

引用：https://github.com/angular/angularfire2/blob/master/docs/rtdb/querying-lists.md

LimitToFirst AngularFire可观察<any>

2 个答案: