切片不适用于Angular Material Angular 6中的分页

Question

由于某种原因，我的 slice 方法在尝试对帖子进行分页时不起作用。我正在使用 Angular Material，我想要做的是能够选择我想在一个页面上查看多少个帖子。我认为使用 slice 方法可以解决这个问题，但这是一个持续存在的问题。这是相关的代码。

register.component.ts

    import { Component, OnInit, ViewChild } from "@angular/core";
import { AngularFireDatabase } from "angularfire2/database";
import * as $ from "jquery";
import { PageEvent, MatTableDataSource, MatSort } from "@angular/material";

@Component({
  selector: "app-register",
  templateUrl: "./register.component.html",
  styleUrls: ["./register.component.css"]
})
export class RegisterComponent implements OnInit {
  showForm = localStorage.getItem("showForm") || false;
  name = localStorage.getItem("name");
  dataSource: MatTableDataSource<object>;

  oops = false;
  posts = [];
  length;
  pageSize = 2;
  pageSizeOptions = [1, 2, 5, 10];
  pageIndex = 0;

  constructor(private db: AngularFireDatabase) {
    // db.list("/forum")
    //   .valueChanges()
    //   .forEach(val => {
    //     val.forEach(obj => {
    //       this.posts.push(obj);
    //     });
    //   });

    db.list("/forum")
      .valueChanges()
      .subscribe(array => {
        this.length = array.length;
      });

    db.list("/forum")
      .valueChanges()
      .subscribe(post => {
        this.posts = post;
      });
  }

  //functions to paginate posts
  @ViewChild(MatSort) sort: MatSort;
  pageEvent: PageEvent;

  onPageChange(e) {
    this.pageIndex = e.pageIndex;
    this.pageSize = e.pageSize;
    this.loadData(this.pageIndex, this.pageSize);
  }

  loadData(pageIndex, pageSize) {
    console.log(pageIndex, pageSize);
    this.dataSource = new MatTableDataSource<object>(
      this.posts.slice(pageIndex, pageIndex + pageSize)
    );
    // this.posts.slice(pageIndex, pageSize + pageSize);
  }

  ngOnInit() {
    // this.db
    //   .list("/forum")
    //   .valueChanges()
    //   .subscribe(post => {
    //     this.posts = post;
    //   });
    this.loadData(0, this.pageSize);
    this.dataSource.sort = this.sort;
  }
  //end of functions to paginate posts
}

register.component.html

<div class="row">
    <div class="col-sm-5 col-md-5 col-lg-5">
      <form>
        <div class="form-group">
          <label for="exampleFormControlTextarea1">How are you?</label>
          <textarea class="form-control" id="textarea" rows="3"></textarea>
        </div>
        <button type="button" (click)="submitPost()" class="btn btn-primary">
          Post
        </button>
      </form>
      <!-- <div class="adverts">
        <img src="../../assets/uber.jpg" class="img-fluid" />
      </div> -->
    </div>
    <div class="col-sm-7 col-md-7 col-lg-7">
      <p *ngFor="let post of posts.slice().reverse()" class="posts">
        {{ post.post }}
      </p>
      <!-- <table class="table" *ngFor="let post of posts.slice().reverse()">
        <tbody>
          <tr>
            <th class="row"></th>
            <td>{{ post.post }}</td>
          </tr>
        </tbody>
      </table> -->
      <mat-paginator
        [length]="length"
        [pageSize]="pageSize"
        [pageSizeOptions]="pageSizeOptions"
        (page)="onPageChange($event)"
      ></mat-paginator>
    </div>
  </div>

页面索引和页面大小工作正常，我在 angular 输入 loaddata 时 console.loged 它工作正常。我认为问题在于 Angular 在实际加载之前看到了 post 数组。但是当我再次在我的 loaddata 函数中 console.log 帖子数组时，我可以看到帖子数组里面有东西。我真的不明白为什么我的切片功能不起作用。任何帮助，将不胜感激。如果有任何与我的密切相关的帖子，请删除它们。我已经阅读了多篇文章，但所有文章都已过时，而且我仍在学习，我发现将他们的代码转换为我的代码具有挑战性。就像我说的，任何帮助表示赞赏。感谢阅读

Answer 1

修复它。似乎我应该一直循环通过数据源。这带来了它自己独特的挑战，但这是另一篇文章的另一个主题。无论如何，美好的一天。