Как извлечь значения в массиве, который возвращается в массивы - HttpClient Service - Angular 7+ - PullRequest
Новая
       29

Как извлечь значения в массиве, который возвращается в массивы - HttpClient Service - Angular 7+

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

Мне трудно понять, как управлять данными, когда они возвращаются из Http-запроса в Angular 7 +

Служба для получения каждого местоположения выглядит следующим образом: 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Base } from '../interfaces/base';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class BaseService {

  base$: Observable<Base[]>;

  constructor(private http: HttpClient) { }

  getAllBases() {
    const token = localStorage.getItem('access_token');
    return this.http.get(
      'https://megaphone-test.herokuapp.com/api/base/getAllBases',
      {
        headers: new HttpHeaders().append('x-access-token', token)
      }
    );
  }
}

Я потребляю это в таком компоненте, как этот (сейчас это огромный сбой). Для краткости я не отправляю весь документ, но мясо и картошка прямо здесь: 

export class TreeComponent implements OnInit {
  @Input() node: string;
  base$: Base[];
  loading: boolean;

  constructor(public baseService: BaseService) { }

  ngOnInit() {
    this.loading = true;
    this.baseService.getAllBases()
    .subscribe(
      res => {
        this.base$ = res['bases'];
      }
    );
  }

}

Если я консоль,Ответ и просмотр в консоли, я получаю два массива, спрятанных внутри одного родительского массива.Поэтому, конечно, res ['base'] выглядит примерно так: 

(2) [{…}, {…}]0: {id: 1, basePhoneNumber: "+18442367381", baseName: "Test AFB 1", bandwidthUserId: "u", bandwidthApiToken: "t", …}1: {id: 2, basePhoneNumber: "+12345678908", baseName: "Test AFB 2", bandwidthUserId: "u", bandwidthApiToken: "t", …}length: 2__proto__: Array(0)

Так что я пытаюсь понять, как я могу взять их и поместить данные во что-то, что сделало бы эту работу? 

<ng-container [clrLoading]="loading">
    <clr-tree-node *ngFor="let base of base$">
        <!-- {{ base?.baseName }} -->
        {{ base.baseName }}
    </clr-tree-node>
</ng-container>

1 Ответ

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

О, боже,

Я просто сегодня не попал в цель!Я выяснил, что стало причиной проблемы!

Видите ли, я использую инфраструктуру пользовательского интерфейса Clarity.

Итак, пример использования представления дерева показывает: 

import {Component, Input, OnInit} from "@angular/core";

@Component({
    selector: "lazy-loaded-locations",
    template: `
        <ng-container [clrLoading]="loading">
            <clr-tree-node *ngFor="let location of locations">
                {{location}}
            </clr-tree-node>
        </ng-container>
    `
})
export class LazyLoadedLocationsComponent implements OnInit {
    @Input() node: string;
    locations: string[];
    loading: boolean;

    ngOnInit() {
        this.loading = true;
        // This would be a call to your service that communicates with the server
        this.locations = fetchLocations();
    }
}

Так что я делал неправильно, не устанавливая состояние загрузки в false после выполнения вызова API.Как только я установил его в ложь, имена баз вышли!Спасибо, что нашли время, чтобы прыгнуть и исследовать со мной.Почувствуй себя настоящим путцем прямо сейчас.

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

Тренер Аллен

...