Angular 刷新以显示Firebase+；角度4

我在angular 4中创建了一个web应用程序，其中包含从firebase读取的数据（通过angular fire 2），但在显示firebase数据的页面上，我必须在显示数据之前刷新页面一次或两次。这不是新数据，而是现有数据。此外，当我将数据写入firebase时，在函数实际写入任何内容之前，我已经从前端运行了两次该函数。有什么问题吗

控制器

import { Component, OnInit } from '@angular/core'

//import api service
import { FreeAgentApiService } from '../free-agent-api.service'

//import list item object
import { ListItem } from './listitem'

//import search componenet
import { SearchComponent } from '../search.component'

//import router 
import { Router, ActivatedRoute, ParamMap } from '@angular/router'

//import animations
import { moveIn, fallIn, moveInLeft } from '../router.animations'

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  animations: [moveIn(), fallIn(), moveInLeft()],
  //host: {'[@moveIn]': ''}
})


export class DashboardComponent implements OnInit {

  //user name
  name: any

  //state 
  state: string = ''

  //search string
  search: String;

  //declare filter
  filterOptions = ["Status: Active", "Status: Completed", "Status: Cancelled", "Status: Hidden"]
  filter = "Status: Active" 

  //projects array
  projects = [];

  //inject api service and router into component
  constructor(private freeAgentApi: FreeAgentApiService, private router: Router){

    this.freeAgentApi.afAuth.authState.subscribe( auth => {
      if(auth){
        this.name = auth
      }
    })
  }

  ngOnInit(){
    //init projects array on page load
    this.projects = this.freeAgentApi.getAllProjects()
    //console.log(this.projects)
  }

  //function to go to project
  openProject(projectName, projectUrl, projectEndDate, clientName){
    //router with parameters
    this.router.navigate(['project'], { 
      queryParams:  { projectName: projectName, projectUrl: projectUrl, projectEndDate: projectEndDate, clientName}
    })
  }
}

查看

<!-- header section -->
<div class="header">
    <div class="headerItem">
        <img class="logo" alt="logo" src="../../assets/images/now-boarding-logo.svg"/>
    </div>

    <div class="headerItem">
        <my-search (onSearchChange)="search = $event"></my-search>
    </div>

    <div class="headerItem">    
        <a class="navTop">projects</a>
        <a class="navTop">reporting</a>
    </div>
</div>

<!-- main section -->
<div class="main" >
    <select class="statusfilter" [(ngModel)] = "filter">
        <option *ngFor="let f of filterOptions">{{f}}</option>
    </select>

    <div class="listentry"
         *ngFor="let p of projects | statusFilter: filter | searchPipe:'projectName':search"
         (click) = "openProject(p.projectName,p.projectUrl,p.endsOn, p.clientName)">

        <div class="listentryitem">
            <div class="userNameCircle">ML</div>
            <p class="project-title">{{p.projectName}}</p>
        </div>

        <div class="listentryitem-2">
            <p class="note-grey">{{ p.clientName }} </p>
        </div>

        <div class="listentryitem-3"> 
            <input class="dateListItem field" type="text" value="{{p.endsOn | date: 'EEE d MMM'}}" disabled="true"/>
            <input class="budgetTimeInput" name="budgetTime" type="text" value="{{p.taskBudgetTime}}" disabled="true"> 
            <progress class="budgetProgressBar" value="{{p.totalTimeLogged}}" max="{{p.taskBudgetTime}}">
                {{ p.taskBudgetTime - p.totalTimeLogged }}
            </progress>
        </div>
    </div>
</div>

---

问题是您期望异步资源是同步的。基本情况是这样的：

getAllProject(){
    let projects = [];

    doAsyncStuffThatTakes30Seconds.subscribe(result => projects = result)

    return projects;
}

在返回项目的时候，异步的东西还没有完成。这就是为什么你看不到数据。这可能会让你想知道为什么有时候会看到数据。这是因为firebase会缓存结果，直到结果发生更改。因此，异步工作在处理之前完成

---

解决方案是返回一个可观察的，并在流中进行所有处理。现在，您可以订阅组件以获取数据。

问题是您希望异步资源是同步的。基本情况是这样的：

getAllProject(){
    let projects = [];

    doAsyncStuffThatTakes30Seconds.subscribe(result => projects = result)

    return projects;
}

在返回项目的时候，异步的东西还没有完成。这就是为什么你看不到数据。这可能会让你想知道为什么有时候会看到数据。这是因为firebase会缓存结果，直到结果发生更改。因此，异步工作在处理之前完成

---

解决方案是返回一个可观察的，并在流中进行所有处理。现在，您可以订阅组件以获取数据。

当您询问由代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。该代码应该是…最小的-使用尽可能少的代码，仍然会产生相同的问题。代码越多，人们发现问题的可能性就越小。请参阅。当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。该代码应该是…最小的-使用尽可能少的代码，仍然会产生相同的问题。代码越多，人们发现问题的可能性就越小。看，我明白你的意思，但我不知道如何构造代码。有一个http请求从“自由代理api”获取信息，我必须在调用firebase之前首先返回该信息，因为要加载的firebase信息链接到该信息。我如何在可观察的环境中实现这一点？您可以使用

switchMap

来实现这一点。例如：

http.get（'someUrl1.switchMap（someValue=>http.get（someValue））

我理解你的意思，但我不知道如何构造代码。有一个http请求从“自由代理api”获取信息，我必须在调用firebase之前首先返回该信息，因为要加载的firebase信息链接到该信息。我如何在可观察的环境中实现这一点？您可以使用

switchMap

来实现这一点。例如：

http.get（'someUrl1.switchMap（someValue=>http.get（someValue））