angular 8 populate 从 observable 下拉

Question

我是 Angular 的新手，我试图从 Angular 8 中的 observable 填充下拉列表，但没有得到任何乐趣。 当我将数据写入控制台日志时，我可以看到 Web 服务正在获取数据，但不知何故没有显示在页面上。

我在网上搜索了很多次，但无济于事。任何帮助表示赞赏

我得到的错误是： ERROR 错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

fetchdata.components.ts

import { Component, Inject } from '@angular/core';
import { FetchdataService } from '../fetchdata.service';
import { ServiceTypes } from '../models/servicetypes';

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {

  serviceTypes: ServiceTypes[];
  serviceType: ServiceTypes;
  isLoaded = false;

 constructor(private _testService: FetchdataService) { }

 getServiceTypes(): void {
   this._testService.getServiceTypes().subscribe(data => {
     if(data) {
       this.serviceTypes = data;
       this.isLoaded = true;
       console.log('List of Service Types', this.serviceTypes);
     }
   } );
 }

 ngOnInit() {
   // fetch all the service types
   this.getServiceTypes();
   //this.serviceType = this.serviceTypes;
 }
}

fetchdata.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ServiceTypes } from './models/servicetypes';

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

  public testURL = 'https://api.myjson.com/bins/1dfxy8';

  constructor(private _http: HttpClient) { }

    getServiceTypes(): Observable<ServiceTypes[]> {
    return this._http.get<ServiceTypes[]>(this.testURL);
    }
  }

serviceTypes.ts

export interface ServiceTypes {
    Code:string;
    Description:string;
    VolumetricRatio: string
}

fetchdata.component.html

<p>fetchdata works!</p>


<p>This component demonstrates fetching data from the server.</p>



<select>
<option *ngFor="let serviceType of serviceTypes" [value]="serviceType.code">{{serviceTypes.Description}}</option>
</select>


<ul>
  <li *ngFor="let serviceType of serviceTypes">
      {{ serviceType.Code }}
  </li>
</ul>

控制台日志 console log showing data and errors

Answer 1

正如 cmets 中所指出的，您在 API 响应中获取的是对象而不是数组。您需要将目标数组分配给您的变量。

代码：

this._testService.getServiceTypes().subscribe(data => {
     if(data) {
       this.serviceTypes = data.ServiceType; // <----- notice .ServiceType
       this.isLoaded = true;
       console.log('List of Service Types', this.serviceTypes);
     }
});

您还应该为响应json 创建一个新的interface 文件，并在您的服务方法中使用它。比如：

export interface ServiceTypeApiModel {
    ServiceType: ServiceTypes[];
}

然后在您的 service 方法中，将响应转换为该模型，如下所示：

getServiceTypes(): Observable<ServiceTypeApiModel> {
  return this._http.get<ServiceTypeApiModel>(this.testURL);
}

Answer 2

嗨，Robw，您可以使用省略调用订阅函数的异步过滤器

serviceType: Observable<any>;

getServiceTypes(): void {
   this.serviceType = this._testService.getServiceTypes();
}

在 HTML 视图中

<li *ngFor="let serviceType of serviceTypes.ServiceType | async">
      {{ serviceType.Code }}
</li>

希望对你有所帮助