Попытка выяснить, как переключить карту организации на базу в угловом компоненте - PullRequest
Новая
       12

Попытка выяснить, как переключить карту организации на базу в угловом компоненте

0 голосов
/ 14 ноября 2018

Итак, у меня есть 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 , похоже, он делает то, что мне нужно для достижения.Из-за моего непонимания предмета я не могу заставить его работать.Вот фрагмент моего углового компонента: 

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);
  }

}

Любая помощь по этому вопросу будет принята с благодарностью.

Приветствия,

Тренер

1 Ответ

0 голосов
/ 14 ноября 2018

Существует три проблемы: во-первых, res['bases'] не является наблюдаемым и поэтому не может быть передан по трубопроводу.Этот вызов функции невозможен: 

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

Во-вторых, вы пытаетесь присвоить Observable свойству this.bases, которое имеет тип Base[], а не Observable<Base[]>.Следовательно, назначение не будет действительным.

В-третьих, даже если бы res['bases'] было Наблюдаемым, вы никогда не подписались бы на него, поэтому оно никогда не будет отправлять никаких уведомлений.

Решениес одной стороны, чтобы не подписываться до 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 должен быть подписчик, чтобы он вступил в силу.

...