Angular 5-我从ngOnInit的firestore中检索了我的对象，但是我的视图不会更新

Question

Using Angular 5 and firestore. I successfully retrieve my document and can see it when I console.log(this.assets) in ngOnInit(). The weird thing is that when my site reloads, if I am quick to get to the view before the console.log() runs, my view renders correctly. But if I wait until I see the console.log(), then click on the link to my view, the view won't load the object that I can see clearly in the console.log(). I assume that my view is not refreshing after: this.assets = assets;

assets.component.ts:

    import { Component, OnInit } from '@angular/core';
import {DataService} from '../services/data.service';
import {Asset} from '../models/data.model';


@Component({
  selector: 'app-assets',
  templateUrl: './assets.component.html',
  styleUrls: ['./assets.component.css']
})
export class AssetsComponent implements OnInit {
  assets: Asset[];
  loadCompleted: boolean = false;
  constructor(public data: DataService) { 

  }

  ngOnInit() {
    this.loadCompleted = false;
    this.data.getAssets().subscribe(
      (assets)=>{
        this.assets = assets;
        console.log("assets.component init")
        console.log(assets);
        console.log(assets.length);
        console.log('2', this.loadCompleted)
      }, 
      (error)=> console.log(error),
      ()=>{
        this.loadCompleted = true
        console.log("3",this.loadCompleted)
      }
    )

  }

}

Those console.log()'s show the correct object and object.length>0. (there are 4 objects in my database)

assets.component.html:

    <div class="container">
  <div class="row">
    TEST TEST TEST
    <div *ngIf="loadCompleted">
        <ul class="list-group" *ngFor="let asset of assets">
            <li class="list-group-item">
              {{asset.name}}
            </li>
          </ul>
    </div>
  </div>
</div>

navbar with /assets link

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
  <a routerLink="/home"  class="navbar-brand">Finances</a>
  <button type="button" 
          class="btn btn-outline-primary navbar-toggler" 
          (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" 
          aria-controls="collapseMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="collapseMenu" class="collapse navbar-collapse" [ngbCollapse]="isCollapsed">
      <ul class="navbar-nav mr-auto" *ngIf="af.isLoggedIn">
          <li class="navbar-item">
            <a routerLink="/home" class="nav-link">Home</a>
          </li>

          <li class="navbar-item">
              <div ngbDropdown class="d-inline-block">
                <button class="btn btn-dark nav-link" id="dropdownBasic1" ngbDropdownToggle>Assets</button>
                <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                  <button class="dropdown-item" routerLink="/assets" >Home</button>
                  <button class="dropdown-item" routerLink="/addAsset" >Add Asset</button>
                  <button class="dropdown-item">Something else is here</button>
                </div>
              </div>
          </li>

          <li class="navbar-item">
            <a routerLink="/liabilities" class="nav-link">Liabilities</a>
          </li>
          <li class="navbar-item">
            <a href="#" class="nav-link">Income</a>
          </li>
          <li class="navbar-item">
            <a href="#" class="nav-link">Expenses</a>
          </li>

      </ul>
      <ul class="navbar-nav">
        <li class="navbar-item" *ngIf="af.isLoggedIn" >
            <a routerLink="/profile" class="nav-link">{{af.user_displayName || af.user_email}}</a>
        </li>
        <li class="navbar-item" *ngIf="af.isLoggedIn" >
            <a routerLink="/profile" class="nav-link">Profile</a>
        </li>
        <li class="navbar-item" >
          <a routerLink="/login" class="nav-link" *ngIf="!af.isLoggedIn">Login/Signup</a>
        </li>
        <li class="navbar-item">
          <a href="" class="nav-link" (click)="logout($event)" *ngIf="af.isLoggedIn">Logout</a>
        </li>
      </ul>
  </div>
</nav>

app-router.module.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {HomeComponent} from './home/home.component';
import {AssetsComponent} from './assets/assets.component';
import {LoginComponent} from './login/login.component';
import {ProfileComponent} from './profile/profile.component';
import { AssetsAddAssetComponent} from './assets-add-asset/assets-add-asset.component';
import { LiabilitiesComponent} from './liabilities/liabilities.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {path: 'home', component: HomeComponent},
  {path: 'assets', component: AssetsComponent},
  {path: 'login', component: LoginComponent},
  {path: 'profile', component: ProfileComponent},
  {path: 'liabilities', component: LiabilitiesComponent},
  {path: 'addAsset', component: AssetsAddAssetComponent},
]

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

data.service.ts

import { Injectable } from '@angular/core';
import {AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection} from 'angularfire2/firestore';
import {Observable} from 'rxjs/observable';

import {Asset} from '../models/data.model';

@Injectable()
export class DataService {
  assetCollection: AngularFirestoreCollection<Asset>;
  assets: Observable<Asset[]>;

  constructor(public afs: AngularFirestore) { 
    //this.assets = this.afs.collection('assets').valueChanges();
    this.assets = this.afs.collection('assets').snapshotChanges().map(changes=>{
      return changes.map(a=>{
        const data = a.payload.doc.data() as Asset;
        data.id = a.payload.doc.id;
        return data;
      })
    })
  }

  getAssets(){
    return this.assets;
  }

  addAsset(asset: Asset){
    this.afs.collection('assets').add(asset);
  }

}

Asset Interface:

export interface Asset {
    id?: string;
    name?: string;
    value?: number;
  } 

Answer 1

This looks like an old-fashioned RxJS problem. Your getAssets() call returns an observable -- this.assets . Since this.assets is in a singleton service (will only be initialized once) events will not be duplicated for each new subscriber. In other words, if when you browse to your new page this.assets has already been subscribed too, the second subscriber will not receive any events.

Fortunately this is easy to fix.

this.assets = this.afs.collection('assets').snapshotChanges().map(changes=>{
  return changes.map(a=>{
    const data = a.payload.doc.data() as Asset;
    data.id = a.payload.doc.id;
    return data;
  })
})
// This will cache the last value and reemit it to new subscribers
.publishReplay(1)
.refCount();

Depending on your version of RX, another option would be to use a ReplaySubject .

@Injectable()
export class DataService {
  assetCollection: AngularFirestoreCollection<Asset>;
  // Will automatically cache the last event for you.
  assets = new ReplaySubject<any>(1);

  constructor(public afs: AngularFirestore) { 
    //this.assets = this.afs.collection('assets').valueChanges();
    this.afs.collection('assets').snapshotChanges().map(changes=>{
      return changes.map(a=>{
        const data = a.payload.doc.data() as Asset;
        data.id = a.payload.doc.id;
        return data;
      })
    }).subscribe(data => {
       this.assets.next(data);
    })
  }

  getAssets(){
    return this.assets;
  }

  addAsset(asset: Asset){
    this.afs.collection('assets').add(asset);
  }

}