离开页面时丢失列表值

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 开始但“没有冷却”的情况下，即没有完成，也没有发出新的值。

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

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

在这种情况下，您有许多可能的解决方案：尝试在组件被销毁时正确取消订阅，将您的 Observable 重新设计为 Behavior Subject...

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