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>

页面索引和页面大小运行正常，我在console.log中输入了角度并输入loaddata并正常运行。我认为问题是angular在实际加载之前看到了post数组。但是当我在loaddata函数中console.log posts数组时，又可以看到其中包含内容的posts数组。我真的不明白为什么我的切片功能不起作用。任何帮助，将不胜感激。如果有任何帖子与我的紧密相关，请删除它们。我读过多个文章，但所有文章都过时了，而且在我仍在学习的同时，我发现将其代码转换为我的代码具有挑战性。就像我说的，任何帮助都是值得的。感谢您的阅读

Answer 1

解决了。似乎我应该一直在遍历dataSource。这带来了自己独特的挑战，但这是另一篇文章的另一个主题。无论如何，美好的一天。

切片在Angular Material Angular 6中无法进行分页

1 个答案: