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操作を使用して必要な場所に組織を挿入することです。そのため、ベースに 1 つ以上の組織がある場合は、ベースに挿入する必要があります。ここに私のインターフェースがあります：

ベース インターフェイス

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

3 つの問題があります。まず、res['bases']Observable ではないため、パイプできません。この関数の呼び出しはできません:

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

第二に、Observable を typeではなくthis.basestype を持つプロパティに割り当てようとしています。したがって、割り当ては有効ではありません。Base[]Observable<Base[]>

第 3 に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 を購読するようにしてください。そうしないと、実際には何も実行されません。のように、内部の Observable をサブスクライブするパイプがいくつかありますが、パイプを有効にするswitchMapには、実際にはswitchMapパイプのサブスクライバーも存在する必要があります。

于 2018-11-14T16:33:44.703 に答える