Срез не работает для разбиения на страницы в Angular Material Angular 6 - PullRequest
Новая
       28

Срез не работает для разбиения на страницы в Angular Material Angular 6

0 голосов
/ 21 февраля 2019

По какой-то причине мой метод слайса не работает при попытке разбить посты на посты.Я использую Angular Material, и я пытаюсь выбрать, сколько постов я хочу просмотреть на странице.Я думал, что использование метода среза это исправит, но это постоянная проблема.Вот соответствующие фрагменты кода.

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.logedэто когда угловые вводят loaddata и все работает нормально.Я думаю, проблема в том, что angular видит массив post до того, как он будет загружен.но опять же, когда я console.log массив posts в моей функции loaddata, я могу видеть массив posts с вещами в нем.Я действительно не понимаю, почему моя функция среза не работает.Любая помощь будет оценена.Если есть какие-либо сообщения, которые очень тесно связаны с моим, пожалуйста, удалите их.Я прочитал несколько постов, но все они устарели и, поскольку я все еще учусь, мне было сложно преобразовать их код в мой.Как я уже сказал, любая помощь приветствуется.Спасибо за чтение

1 Ответ

0 голосов
/ 21 февраля 2019

Исправлено.Кажется, я должен был перебирать dataSource.Это принесло свои собственные уникальные проблемы, но это еще одна тема для другого поста.Во всяком случае, великий день, люди.

...