Question

我遇到一个奇怪的问题，我知道我可以使用路由器进行导航，但是我真的想继续使用Mat Tabs在组件之间移动。

我返回的是Observable，当ngOnInit（）触发时，会用我的应用程序中的适当值填充一个表。一旦我切换到另一个MatTab，返回的数据将变得不确定-这会破坏组件吗？我的想法是，我应该能够使用ngDoCheck（）或类似的生命周期挂钩来触发刷新函数以达到可观察的状态，但是即使我的控制台将ngDoCheck（）记录为触发，我似乎也不返回任何内容。 MatTabs里面有一些我看不到的东西吗？如果我更改URL以在组件之间导航，则一切正常，但是一旦刷新功能从选项卡更改中触发，我会在控制台中看到Observable，但什么也没回来。从理论上讲，即使切换选项卡后数据变得不确定，我是否也不能每次都通过触发refresh（）函数再次单击可观察项并获得我之前的值？

这里是男女同校邮政服务：

    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，但是如果刷新页面，效果很好。谢谢。

如何在MatTab单击更改事件之后合并一个Lifestylehook来重新填充MatTable？

0 个答案: