离开页面时丢失列表值

Question

所以我将 IItineraries 列表存储在我在 ngOnInit 上分配的私有变量中，如下所示：

  ngOnInit() {
    this.loggedInUser = firebase.auth().currentUser;
    this.dataSvc.getItineraries().subscribe(res => {
      this.itineraries = res;
    });
    console.log('logged in user add itin page', this.itineraries);
  }

                <ion-list>
                  <div *ngFor="let itinerary of itineraries">
                    <ion-card class="itinerary-module">
                      <ion-card-content>
                        <div>
                          <h2>{{itinerary.startDate | date: "MM/dd/yyyy"}} - {{itinerary.endDate | date: "MM/dd/yyyy"}}</h2>
                        </div>
                        <div>
                          <h1>{{itinerary.destination}}</h1>
                        </div>
                        <div>
                          <h2>{{itinerary.tripDetails}}</h2>
                        </div>
                        <div class="chip" *ngFor="let activity of itinerary.activities">
                          <label> {{ activity }} </label>
                        </div>
                      </ion-card-content>
                    </ion-card>
                  </div>
                </ion-list>

在初始页面加载时没问题...显示了值，但是当我离开页面然后返回时它是空白的，并且在我关闭并重新打开应用程序之前不会显示值。

Answer 1

我怀疑您处于冷 Subject Observable 启动但 "not cooling down" 的情况，即没有完成，也没有发出新值。

在您的情况下，这意味着当您导航回您的页面时，您的 getItineraries() 服务方法新调用很可能会为您提供与第一次相同的 Observable 引用。它已经开始发射，因为你是第一次订阅它。

但是现在您不会对 itineraries 组件进行任何赋值属性，直到 Observable 发出一个新值，这可能永远不会发生，具体取决于它在内部所做的事情。

在那种情况下，您有许多可能的解决方案：尝试在组件被销毁时适当地取消订阅，将您的 Observable 重做为行为主题...

如果你只在你的模板中使用它，你也可以直接用异步管道调用它。组件销毁时模板会自动退订

离开页面时丢失列表值

Lose the list values when navigating away from page

html

firebase

typescript

angular

ionic4