0

所以我有一个 API，我试图从中使用数据。正在重新调整的数据：

组织

baseId: 1
createdAt: "2018-11-14T04:35:35.345Z"
id: 1
isActive: true
orgName: "Test Organization 1"
orgOwner: 2
subscriptionCode: "testorg1"
updatedAt: "2018-11-14T04:35:35.34

根据

bandwidthApiSecret: "xxxxxx"
bandwidthApiToken: "t-xxxxxx"
bandwidthUserId: "u-xxxxxx"
baseName: "Test AFB 1"
basePhoneNumber: "+18442367381"
createdAt: "2018-11-14T04:35:35.123Z"
id: 1
isActive: true
updatedAt: "2018-11-14T04:35:35.123Z"

我想做但无法理解的是使用 rxjs 操作在需要的地方插入组织。因此，如果一个基地有一个或多个组织，则应将其插入基地。这是我的界面：

基础接口

import { Organization } from './organization';
import { BaseManager } from './base-manager';

export interface Base {
    id: number;
    basePhoneNumber: string;
    baseName: string;
    bandwidthUserId: string;
    bandwidthApiToken: string;
    bandwidthApiSecret: string;
    createdAt?: Date;
    updatedAt?: Date;
    orgs?: Organization;
    managers?: BaseManager;
}

组织界面

export interface Organization {
    id: number;
    orgName: string;
    orgOwner: string;
    baseId: number;
    subscriptionCode: string;
    isActive: boolean;
    createdAt: Date;
    updatedAt: Date;
}

我发现这个JSBin看起来像是在做我需要完成的事情。由于我对这个主题缺乏理解，我无法让它发挥作用。这是我的 Angular 组件的片段：

import { Component, OnInit } from '@angular/core';
import { Base } from 'src/app/core/interfaces/base';
import { BaseService } from 'src/app/core/services/base.service';
import { OrgService } from 'src/app/core/services/org.service';
import { Organization } from 'src/app/core/interfaces/organization';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-base-list',
  templateUrl: './base-list.component.html',
  styleUrls: ['./base-list.component.css']
})
export class BaseListComponent implements OnInit {

  bases: Base[];
  orgs: Organization[];

  constructor(private baseService: BaseService, private orgService: OrgService) { }

  ngOnInit() {
    this.loadOrgs();
    this.loadBases();
  }

  loadBases() {
    this.baseService.getAllBases()
      .subscribe(
        res => {
          this.bases = res['bases'];
          console.log(this.bases);
        }
      );
  }
  // loadBases(): Base[] {
  //   this.baseService.getAllBases()
  //     .subscribe(
  //       res => {
  //         this.bases = res['bases'].pipe(
  //           switchMap( base => {
  //             return this.getOrg(base.id).map(
  //               base => {
  //                 return Object.assign(base, {base, {org: this.orgs});
  //               }
  //             )
  //           })
  //         );
  //       });
  // }

  loadOrgs() {
    this.orgService.getOrgs()
      .subscribe(
        res => {
          this.orgs = res['orgs'];
          console.log(this.orgs);
        }
      );
  }

  getOrg(baseId) {
    this.bases.filter(base => base.id === baseId);
  }

}

任何有关此事的帮助将不胜感激。

干杯，

教练

4

1 回答 1

1

存在三个问题：首先，res['bases']它不是 Observable，因此无法通过管道传输。此函数调用是不可能的：

res['bases'].pipe(...)

其次，您试图将 Observable 分配给this.bases具有 typeBase[]而不是的属性Observable<Base[]>。因此，该分配将无效。

第三，即使res['bases']是一个 Observable，你也永远不会订阅它，所以它永远不会发出任何通知。

解决方案一方面是在 之前不订阅switchMap，但在之后另一方面要正确处理数组集合，例如使用zip. 这就是它的样子：

this.baseService.getAllBases().pipe(
        switchMap(bases =>
            zip(...bases.map(base =>
                    this.getOrg(base.id).pipe(
                        map(base => Object.assign(base, {orgs: this.orgs}))
                    )
                )
            )
        )
    ).subscribe(bases =>
        this.bases = bases
    )

loadOrgs现在，另一个问题是在尝试加载基地之前您不会等待竞争。这也应该像这样连接：

loadOrgs(): Observable<Organization[]> {
    return this.orgService.getOrgs().pipe(
        tap(
            res => {
                this.orgs = res['orgs'];
                console.log(this.orgs);
            }
        )
    )
}

并在ngOnInit：

ngOnInit() {
    this.loadOrgs().subscribe(() => {
        this.loadBases();
    });
}

根据经验，请务必始终订阅您的 Observables，否则您实际上不会执行任何操作。有一些管道确实订阅了内部 Observables，例如switchMap，但实际上还必须有一个订阅者来订阅switchMap管道才能使其生效。

于 2018-11-14T16:33:44.703 回答