Использование услуг в Angular5 не работает - PullRequest
Новая
       9

Использование услуг в Angular5 не работает

0 голосов
/ 12 октября 2018

Я почти новичок в angular и изучаю его из Интернета.

Мое приложение на 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;
  }   
}

И в моем компоненте я называю это как

  1. Служба импорта

    импорт {CommonService} из '../../../../services/common.service';

  2. Объявить в конструкторе

    private 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

DropDown [], который я использовал в своем .ts коде - это класс 

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

}

Я отладил свой API.Он делает вызовы каждый раз и возвращает данные, даже когда угловой не загружается, поэтому кажется, что API в порядке, но проблема в Angular

Ниже приведен снимок console.log()

Первый разAPI возвращает данные, но выводит пустой массив.

Во второй раз после переключения страницы выводит 3 элемента из массива, что правильно.

enter image description here

Как я могу решить это?

Почему данные не привязываются к списку в первый раз?

Возможно, angular не ожидает API для возврата результата в первый раз?

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Вы должны знать, как вы можете использовать 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);
      })
  }   
}
0 голосов
/ 12 октября 2018

http.get является асинхронным, поэтому требуется время для вызова обратного вызова, где вы устанавливаете this.PostOfficeList = result.Вызов http.get не блокируется, поэтому при возврате this.PostOfficeList в GetPostOfficeList он не определен в первый раз.В конце концов, данные поступают, и они устанавливаются в вашем сервисе и становятся доступными при следующем вызове GetPostOfficeList.

Ваша сервисная функция должна вернуть Observable, и вы должны подписаться на это, наблюдаемое в компоненте ngOnInit.Или вы можете разрешить данные в маршрутизаторе до инициализации вашего компонента.

...