0

我正在尝试创建一个 Angular 2 Provider，它在使用响应式方法时执行所有 CRUD 操作。loadAll()但是，当我第一次调用时，我的 Ionic 应用程序会添加到我的列表中，但是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>
...

添加子组件

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）测试了我的反应式提供者，如果我在我的提供者中改变这两个东西：

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 而不是主题时，以及this.loadAll()在为新子项调用的函数中调用时，子项列表在 Angular 中更新，但在我的 Ionic 应用程序中没有更新。

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

它打印出所有预期的日志，说它创建了孩子，它正确地执行了发布请求，在我收到请求后，它说它通过流创建了孩子，但没有任何更新。

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

谢谢

4

1 回答 1

0

需要进行三个主要更改来解决此问题：

  • 删除 AddChildComponent - 直接在 HomePage 中添加子项
  • children将属性更改ChildrenService为Observable
    a 而不是 aSubject/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 中。

于 2016-09-05T19:20:26.500 回答