Как включить Lifestylehook для повторного заполнения MatTable после события изменения нажатия MatTab? - PullRequest
Новая
       21

Как включить Lifestylehook для повторного заполнения MatTable после события изменения нажатия MatTab?

0 голосов
/ 19 марта 2019

У меня странная проблема, я знаю, что могу обойтись, используя Маршрутизатор для навигации, но я действительно хочу продолжать использовать вкладки Mat для переключения между компонентами.

Я возвращаю и Observable, который заполняет таблицу с правильными значениями в моем приложении один раз, когда срабатывает ngOnInit (). Возвращенные данные становятся неопределенными, когда я переключаюсь на другой MatTab - это уничтожает компонент? Я думаю, что я должен быть в состоянии запустить функцию обновления для попадания в наблюдаемое с помощью ngDoCheck () или аналогичных хуков жизненного цикла, но я, похоже, ничего не возвращаю, даже если моя консоль регистрирует ngDoCheck () как срабатывание. Есть ли какие-то вещи под капотом с MatTabs, которые я не вижу здесь? Если я изменяю URL для навигации между компонентами, все работает нормально, но как только функция обновления запускается из-за изменения вкладки, я вижу Observable в консоли, но ничего не возвращается. Теоретически, разве я не должен иметь возможность просто снова нажимать на моё наблюдаемое при каждом нажатии этой вкладки с помощью функции refresh () и получать значения, которые у меня были раньше, даже если после переключения вкладок данные становятся неопределенными?

Вот мне, студентка PostService: 

    import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, 
AngularFirestoreDocument} from "@angular/fire/firestore"
import { Post } from '../models/post'
import { Observable} from 'rxjs'
import { map } from 'rxjs/operators'
import { config } from '../config'



@Injectable({
  providedIn: 'root'
})
export class PostService {
  selectedIndex: number
  currentPostId: string;
  currentPost: Post;
  postsCollection: AngularFirestoreCollection<Post>
  private postDoc: AngularFirestoreDocument<Post>
  posts: Observable<any[]>
  currentUser = JSON.parse(localStorage.getItem('user'))
  currentUserPosts: Observable<any[]>

  constructor(private afs: AngularFirestore, private router:Router) {
    this.postsCollection = afs.collection<Post> 
     (config.collection_endpoint); <-----this is working

    this.posts = 
      this.afs.collection('posts').snapshotChanges()
      .pipe(map(actions => actions.map(this.documentToDomainObject)));

   } 
  getPosts(){
    console.log(this.posts)
    console.log("^^^^^^^^^^^^^^^^^^^^ POSTS ^^^^^^^^^^^^^^^^^")
         return this.posts
      }
   documentToDomainObject = _ => {
    const object = _.payload.doc.data();
    object.id = _.payload.doc.id;
    return object;
}

  editTabClicked(){
      this.getUserPosts()
      }

  searchTabClicked(){
      this.getPosts()
    }
    }

Компонент панели инструментов (где все живет) 

import { MatTableDataSource } from '@angular/material';

import { FeedComponent } from './../feed/feed.component';
import { Post } from './../../models/post';
import { PostService } from './../../services/post.service';
import { MatTabChangeEvent } from '@angular/material/';
import { ProfileComponent } from './../profile/profile.component';
import { MessageComponent } from './../message/message.component';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';






@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  currentUser = JSON.parse(localStorage.getItem('user'))
  postData:MatTableDataSource<any>;


  constructor(public ps: PostService, public change:ChangeDetectorRef) { }

  ngOnInit() {
  } 

  tabChange(event: MatTabChangeEvent){
    console.log('event => ', event);
    console.log('index => ', event.index);
    console.log('tab => ', event.tab);
    this.change.markForCheck()
 }


}

Dashboard.html 

<mat-tab-group (selectedTabChange)="this.tabChange($event)">

  <mat-tab label="Search Posts" click="searchTabClicked()">
    <ng-template matTabContent>
      <mat-icon></mat-icon>
      <app-feed></app-feed>
    </ng-template>
  </mat-tab>


  <mat-tab label="Publish Post">
    <ng-template matTabContent>
      <p>
        <mat-icon>publish</mat-icon>Create new posts</p>
      <app-posts></app-posts>
    </ng-template>
</mat-tab>

  <mat-tab label="Edit Posts" (click)="editTabClicked()">
    <ng-template matTabContent>
      <mat-icon>edit</mat-icon>
      <app-edit></app-edit>
      <p>Grab users posts with edit function</p>

    </ng-template>
  </mat-tab>


</mat-tab-group>

FeedComponent (проблемная область) 

import { ClaimComponent } from './../claim/claim.component';
import { PostService } from './../../services/post.service';
import { Post } from './../../models/post';
import { Component, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
import { MatSort, MatTableDataSource, MatCheckbox, MatPaginator, MatTabChangeEvent, MatDialog, MatDialogActions}  from "@angular/material"
import {tap} from 'rxjs/operators'



@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
  postData: Post[] =[];

  dataSource : MatTableDataSource<any> = new MatTableDataSource;
  currentUser = JSON.parse(localStorage.getItem('user'))
  @ViewChild(MatSort) sort:MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  displayedColumns:string[] = ['Title', "Description", "Pick Up Date" , "Location", "Contact" ]
  posts = this.ps.getPosts();
  constructor(private ps: PostService, public dialog:MatDialog, public change:ChangeDetectorRef) { 

  }
  refreshPosts(){

    this.posts.subscribe(posts=>{

      this.postData = posts.filter(post => post.claimedBy != 
     `${this.currentUser.uid}`);
      console.log("on Init firing")
      console.log(this.postData)

      this.dataSource= new MatTableDataSource(this.postData)
      console.log(this.dataSource)
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort
    });
   }
  ngOnInit() {
   this.refreshPosts() < ----- returns full array and populates MatTable

  }
  ngDoCheck(){
 this.refreshPosts() <---- doesn't seem to fire
 console.log("fired")<-----logs like 50 times
 console.log(this.dataSource) <-------returns []
  }

Мне кажется, что я что-то упускаю из-за хуков lifeCycle или как-то портлю Observable, но это прекрасно работает, если я обновляю страницу. Спасибо в Advnace.

...