在 Angular5 中使用服务不起作用

Question

我几乎是 angular 的新手，并且是从 Internet 上学习的。

我的应用程序位于 Angular 5 和 .Net core 2.1。我正在尝试将一些常用方法放入服务中，而不是在每个组件中一次又一次地编写它们

例如，

import { Injectable } from '@angular/core';
import { DropDown } from '../jlg/jlg-models/DropDown';
import { appConfig } from '../../_shared/app.config';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const httpOptions = appConfig.httpOptions;

@Injectable()
export class CommonService {

  constructor(private http: HttpClient) { }

  public DropDownList: DropDown[] = [];
  public PostOfficeList: DropDown[] = [];

  GetPostOfficeList() {
    this.http.get<DropDown[]>(appConfig.BaseUrl + 'api/Common/GetPostOfficeList/', httpOptions)
      .subscribe(result => {
        this.PostOfficeList = result;
      }, error => {
        console.error(error);
      })
    return this.PostOfficeList;
  }   
}

在我的组件中，我将其称为

导入服务

从'../../../../services/common.service'导入{CommonService};
在构造函数中声明

私有 scv: CommonService

还有

PostOfficeList: DropDown[] = [];

比构造函数内部

this.PostOfficeList = this.scv.GetPostOfficeList();

并且在html

 <select name="POId" [(ngModel)]="PostOfficeId" class="form-control" required #POId="ngModel">
 <option *ngFor="let item of PostOfficeList" [value]="item.Value">{{item.Text}}</option>
 </select>
 <span class="text-danger" *ngIf="POId.invalid && (POId.dirty || POId.touched)">* Required Field </span>

代码对我来说看起来不错，但它不会第一次将数据加载到 PostOfficeList 中，当我切换到其他页面然后返回到此页面时，我发现它已加载到 Dropdown

我在 .ts 代码中使用的

DropDown[] 是 class

export class DropDown {
public Text: string;
public value: string;

}

我调试了我的 API。它每次都会调用 return 数据，即使 angular 没有加载下拉列表，所以看起来 API 没问题，但问题出在 Angular

下面是console.log()

的截图

第一次 API return 数据，但打印空数组。

第二次切换页面后，它从正确的数组中打印 3 个项目。

我该如何解决？

为什么第一次没有绑定数据到List？

可能 angular 不是在等待 API 到 return 的第一次结果？

Answer 1

http.get 是异步的，因此调用成功回调（您设置 this.PostOfficeList = result 的位置）需要一些时间。调用 http.get 不会阻塞，所以当你 return this.PostOfficeList 在 GetPostOfficeList 中第一次是未定义的。最终数据到达并在您的服务中设置并在您下次调用 GetPostOfficeList.

时可用

您的服务功能应该 return Observable 并且您应该在组件 ngOnInit 功能中订阅该可观察对象。或者你可以在你的组件初始化之前解析路由器中的数据。

Answer 2

您需要知道如何使用 async 管道工程。使用这种方法肯定能解决您的问题。

你可以按照这个例子

https://angular.io/api/common/AsyncPipe

另一种方法是

<option *ngFor="let item of PostOfficeList" [value]="item.Value">


export class CommonService {

  constructor(private http: HttpClient) { 
    this.GetPostOfficeList();
  }

  public DropDownList: DropDown[] = [];
  public PostOfficeList: DropDown[] = [];

  GetPostOfficeList() {
    this.http.get<DropDown[]>(appConfig.BaseUrl + 'api/Common/GetPostOfficeList/', httpOptions)
      .subscribe(result => {
        this.PostOfficeList = result;
      }, error => {
        console.error(error);
      })
  }   
}

在 Angular5 中使用服务不起作用

Consuming Services In Angular5 is Not Working

asp.net-core-webapi

angular

angular5