angular - Ionic 2 ngFor更新 View 中的数据

Question

在我的项目“无限滚动日历”中，我使用 ngFor 使用“pipe”mapToIterable 来交互对象。

不幸的是，我注意到当我向对象添加新属性时， View 变量已更新，但 ngFor 未更新列表。 问题是，当我进入 View 时，它填充得很好，但是当我向下滚动时，它成功地从 API 检索数据，但没有更新 ngFor 中的列表。

我尝试通过将代码放入 zone.run() 来解决问题，但没有成功。

#ionic info

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.5.0
Xcode version: Not installed

编写一些代码的时间:

// mapToIterable.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'mapToIterable'})
export class MapToIterablePipe implements PipeTransform {
  transform(value): any {
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key]});
    }
    return keys;
  }
}

.

// index.ts
export class Appointments {
  appointments = {};
  current_date = new Date();
  top_date: any = new Date(+new Date - 12096e5);  // 14 days past
  bottom_date: any = new Date(+new Date + 12096e5);  // 14 day future
  range = {
    start_date: this.top_date,
    end_date: this.bottom_date
  }

  generateDays = function (start, end) {
    while(start < end) {
      start.setDate(start.getDate() + 1);
      this.appointments[start.toISOString().slice(0, 10)] = [];
    }
  };

  fillDays = function () {
    this.appointmentService.all(this.range).map(res => res.json()).subscribe(
      data => {
        for (var appointment in data) {
          this.appointments[appointment] = data[appointment];
        }
      },
      err => {
        console.log(JSON.parse(err._body));
      }
    );
  };

  constructor(
    public navCtrl: Nav,
    public appointmentService: AppointmentService,
  ) {
    var temp_date: any = new Date(this.top_date);
    this.generateDays(temp_date, this.bottom_date);
    this.fillDays();
  }

  moreFuture(infiniteScroll) {
    setTimeout(() => {
      var temp_date: any = new Date(this.bottom_date);
      this.bottom_date = new Date(+temp_date + 12096e5); // add 14 days
      this.range.start_date = temp_date;
      this.range.end_date = this.bottom_date;
      this.generateDays(temp_date, this.bottom_date);
      this.fillDays();
      infiniteScroll.complete();
    }, 500);
  };
}

.

// index.html
 <ion-content padding>
  {{appointments | json}}
  <ion-list class="calendar-list">
    <div *ngFor="let appointment of appointments | mapToIterable" [id]="appointment.key">
      <ion-item class="day past">
        <ion-avatar class="date" item-left>
          <h1>{{appointment.key | date: 'dd'}}</h1>
          <h2>{{appointment.key | date: 'MMM'}}</h2>
        </ion-avatar>
        <div *ngIf="!!appointments[appointment.key].length">
          <ion-avatar class="inline" text-center padding>
            {{appointments[appointment.key][0].patient.first_name[0]}}{{appointments[appointment.key][0].patient.last_name[0]}}
          </ion-avatar>
          <div class="inline">
            <h2 class="username" text-wrap>
              {{appointments[appointment.key][0].patient.first_name}}
              {{appointments[appointment.key][0].patient.last_name}}
            </h2>
            <p>
              <ion-icon name="clock-gray"></ion-icon>
              {{appointments[appointment.key][0].time_start | date: 'HH:mm'}}
              -
              {{appointments[appointment.key][0].time_end | date: 'HH:mm'}}
            </p>
          </div>
        </div>
      </ion-item>
    </div>
    <ion-infinite-scroll (ionInfinite)="moreFuture($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-list>
</ion-content>

原因是我使用的是对象而不是数组？

我将感谢每一个答案:)

Answer 1

这是因为您使用的是“纯管道”，当它所应用的值或引用发生变化时，该管道就会执行。 它不会检测对象属性更改。在您的情况下，mapToIterable 管道不知道对象属性发生的更改 Check here

尝试

@Pipe({name: 'mapToIterable',pure:false})