Question

我正在尝试从我的locations中获取API的列表。它们是仅具有objects属性的name数组。下面的代码实际上是在Web开发人员控制台中显示它们时检索它们，但是由于某些原因，它们无法分配给我的本地变量，因此无法使用*ngFor通过'let loc of locations'并使用{ {{loc.name}}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';

export interface Location {
  name: string;
}

@Injectable()
export class LocationService {
  locations: Observable<Location[]>;
  private _locations: BehaviorSubject<Location[]>;
  private baseUrl: string;
  private dataStore: {
    locations: Location[];
  };

  constructor(private http: HttpClient) {
    this.baseUrl = 'http://localhost:3000';
    this.dataStore = { locations: <any>[] };
    this._locations = <BehaviorSubject<Location[]>>new BehaviorSubject([]);
    this.locations = this._locations.asObservable();
  }

  loadAll() {
    this.http.get(`${this.baseUrl}/locations`).subscribe(
      (data) => {
        console.log(data);

        this.dataStore.locations = data;
        this._locations.next(Object.assign({}, this.dataStore).locations);
      },
      (error) => console.log('Could not load Locations.')
    );
  }
}

Answer 1

首先，当您订阅this.locations并假设this.dataStore.locations看起来像[1, 2, 3]时，您会收到{0: 1, 1: 2, 2: 3}，因为您将数组分配给对象。

第二件事是您遍历locations，但这是一个BehaviorSubject，因此您可能需要在HTML中添加async管道。

解决方案可能是：

loadAll() {
    this.http.get(`${this.baseUrl}/locations`).subscribe(
        (data) => {
            console.log(data);

            this.dataStore.locations = data;
            this._locations.next([...this.dataStore.locations]);
        },
        (error) => console.log('Could not load Locations.')
    );
}

和html中的

<div *ngFor="let item of items | async">
  <div>{{item.someProperty}}</div>
</div>

Answer 2

非常感谢。我对Observables相当陌生，并且很难管理此对象分配。我已经尝试过您的代码，但仍然无法正常工作。我认为主要问题是将对象强制转换为Array类型。最终，我希望这些位置成为具有name属性的对象，因此我真的不愿意更改它。但是，当它从服务器返回时，我需要将其放入Observable的数组中，或者至少这是我在想的。但是，使用NGFOR，我应该能够遍历一系列对象，对吗？使用obj.name语法。我确实尝试过Async管道，它没有破坏代码，但是也没有用。我在Web控制台中从服务器读取的内容是两个对象组成的数组，每个对象都有一个name属性。还是很困惑

(2) [{…}, {…}]0: {name: "Home"}1: {name: "Store"}length: 2__proto__: Array(0)

Angular Service-对象无法分配给数组

2 个答案: