Question

我正在尝试创建一个Angular 2 Provider，它在使用被动方法时执行所有CRUD操作。但是，当我第一次拨打loadAll()时，我的Ionic App会添加到我的列表中，但在此之后我随时调用this.children.next(children)时，它不会更新列表。

另外，我打电话给this.childrenService.createChild(child)，也没有更新孩子。

我的环境：

在Windows 10上运行，并运行 ionic --version ，我 2.0.0-beta.35

我的package.json的一部分：

...
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"ionic-angular": "2.0.0-beta.11",
"ionic-native": "1.3.10",
"ionicons": "3.0.0"
...

提供商类：

import {Injectable, EventEmitter} from '@angular/core';
import { Http } from '@angular/http';
import {Child} from "../../models/child.model";
import {Constants} from "../../models/Constants";
import 'rxjs/Rx';
import {Observable, Subject, ReplaySubject} from "rxjs";
import {IChildOperation} from "../../models/IChildOperation";

@Injectable()
export class ChildrenService {

  public children: Subject<Child[]> = new Subject<Child[]>();
  private updates: Subject<IChildOperation> = new Subject<IChildOperation>();
  private createStream: Subject<Child> = new Subject<Child>();

  constructor(private http: Http) {
    this.updates
    .scan((children : Child[], operation: IChildOperation) => {
        return operation(children);
      }, [])
    .subscribe(this.children);

    this.createStream
    .map((newChild: Child) => {
      //"Do what is in this returned method for each child given to this create object (via this.createStream.next(newChild))"
      return (curChildren: Child[]) => {
        console.log("Creating a new child via stream.");
        return curChildren.concat(newChild);
      }
    })
    .subscribe(this.updates);

    this.loadAll();
  }

  createChild(newChild: Child) {
    console.log("Creating child...");
    this.http.post(`${Constants.CHILDREN_API}`, newChild)
    .map(res=>res.json())
    .subscribe((newChild: Child) => {
      console.log("Child Created!");
      console.log(newChild);
      this.createStream.next(newChild);
    });
  }

  loadAll() {
    this.http.get(`${Constants.CHILDREN_API}`)
    .map(res => res.json())
    .subscribe(
      (children: Child[]) => { // on success
        console.log(children);
        this.children.next(children);
      },
      (err: any) => { // on error
        console.log(err);
      },
      () => { // on completion
      }
    );
  }
}

主页组件

import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
import {NavController, ModalController} from 'ionic-angular';
import {AddChildPage} from "../add-child/add-child";
import {ChildrenService} from "../../providers/children/ChildrenService";
import {Child} from "../../models/child.model";
import {AsyncPipe} from "@angular/common";

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [ ChildrenService ],
  pipes: [AsyncPipe],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage implements OnInit {
  constructor(
    private nav: NavController,
    private childrenService: ChildrenService,
    private modalCtrl: ModalController) {}
  }

  goToAddChild() {
    this.nav.push(AddChildPage);
  }
}

主页模板

...
  <ion-list>
    <ion-item *ngFor="let child of childrenService.children | async">
      {{ child.name }}
    </ion-item>
  </ion-list>

  <button secondary fab fab-fixed fab-bottom fab-right margin
          (click)="goToAddChild()"><ion-icon name="person-add"></ion-icon></button>
...

AddChild组件

import {Component, Output} from '@angular/core';
import {NavController, NavParams, ViewController} from 'ionic-angular';
import {ChildrenService} from "../../providers/children/ChildrenService";
import {Child} from "../../models/child.model";

@Component({
  templateUrl: 'build/pages/add-child/add-child.html',
  providers: [ ChildrenService ]
})
export class AddChildPage {
  newChild: Child;

  constructor(private nav: NavController, private childrenService: ChildrenService, public viewCtrl: ViewController) {
    this.newChild = new Child({ name: "" });
  }

  addChild() {
    this.childrenService.createChild(this.newChild);
    this.dismiss();
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

更新：我仅使用Angular 2（没有Ionic 2）测试了我的Reactive Provider，如果我在提供商中更改了这两件事：

export class ChildrenService {

  //Changed child from Subject to ReplaySubject
  public children: ReplaySubject<Child[]> = new ReplaySubject<Child[]>();
  ...


  createChild(newChild: Child) {
    console.log("Creating child...");
    this.http.post(`${Constants.CHILDREN_API}`, newChild)
    .map(res=>res.json())
    .subscribe((newChild: Child) => {
      console.log("Child Created!");
      console.log(newChild);
      this.createStream.next(newChild);
      this.loadAll(); //This is the NEW line in createChild
    });
  }

当我将子项更改为ReplaySubject而不是Subject时，以及在为新子项调用的函数中调用this.loadAll()时，子项列表在Angular中更新，但在我的Ionic中不会更新应用

我注意到curChildren（在createStream中的函数中找到）始终为空。我假设curChildren将是当前显示的那些。

它打印出所有预期的日志，说它创建了孩子，它确实发出了请求权，在我收到请求后，它说它通过流创建孩子但没有更新。

我认为这可能是Ionic没有正确地通过流更新，或者我没有正确使用rxjs。它可能是什么？

由于

Answer 1

需要进行三项主要修改才能解决此问题：

删除AddChildComponent - 直接在HomePage中添加子项
将children中的ChildrenService属性更改为Observable
而不是Subject/ReplaySubject
而不是：this.updates.scan(...).subscribe(this.children)，将其更改为this.children = this.updates.scan(...)

<强> ChildrenService.ts

...
export class ChildrenService {

  public children: Observable<Child[]> = new Observable<Child[]>();
  ...

  constructor(private http: Http) {
    //AsyncPipe will take care of subscribing, so just set it to this.updates
    this.children = this.updates
    .scan((children : Child[], operation: IChildOperation) => {
        return operation(children);
      }, []);

    ...
  }
}

带走： AsyncPipe非常适合此问题。但是，我仍然不确定为什么必须删除AddChild组件，因为所有创建逻辑都在ChildrenService中。

Angular 2组件未使用带有Reactive Provider的* ngFor进行更新

1 个答案: