Angular Сервис Httpclient возвращает данные, но печать данных не удалась. Как заставить ждать до окончания подписки

Question

Я создаю приложение для управления участниками.

У меня есть компонент, который должен печатать детали участника.

Компонент внедряет 2 службы: один для получения сведений о члене, другой - для извлечения элемента. массив всех описаний стран ..

Я хочу разрешить страну на основе идентификатора страны, сохраненного в memberdetails.

member-details.component.ts:

  memberDetails: Observable<MemberDetailsModel>;
  memberDetailsData: MemberDetailsModel;
  countryList: Country[]  = new Array();
  memberid: number;
  inputsMemberDisabled: boolean;

  constructor(private route: ActivatedRoute, private memberService: MemberService, private globalDataService: GlobalDataService, private router: Router) {
  }


  ngOnInit() {
    this.inputsMemberDisabled = true;
    this.memberid = this.route.snapshot.params['id'];

    console.log('calling getCountryList: ' + this.countryList);
    this.countryList = this.globalDataService.getCountryList();
    this.getMemberDetails();

  }


  getMemberDetails() {
    this.memberService.getMemberDetails(this.memberid).subscribe(response => {
      this.memberDetails= response;
      this.memberDetailsData = response;
    });
    console.log("getMemberDetails() countrylist: "+ this.countryList)
  }

  mapCountry(id: number): Country {
    console.log('mapCountry: ' + this.countryList);
    for (var i = 0, len = this.countryList.length; i < len; i++) {
      let country = this.countryList.pop();
      if (id === country.id) {
        return country;
      }

    }
    return new Country();

Пока что извлечение информации о членах работает нормально. Но я не могу разрешить страну. Это говорит неопределенный!

member-details.component.ts (строка 21 -)

Если я проверю выходные данные службы глобальных данных, я вижу, что Страна Объекты извлекаются. Я предполагаю, что html -компонент пытается отрисовать страну до того, как закончится даже Observable в сервисе глобальных данных (по крайней мере, журналы консоли дают мне пустые массивы в member-details.component.ts)

global-data-service.ts

  country: Observable<Country[]>;
  countryList: Country[] = [];

  constructor(private http: HttpClient) {
  }

  getCountryList(): Country[] {
    if (this.countryList.length < 1) {
      console.log("<1");
      this.initializeCountryList().subscribe((res => {
        console.log('countrylist result: ' + res);
        this.countryList = res;
        console.log('countrylist result2: ' + res);
      }));
    }

    return this.countryList
  }

  initializeCountryList(): Observable<Country[]> {
    if (this.countryList.length < 1) {
      //return this.http.get(`${this.baseUrl}/countrylist`).pipe(map(res => res as Country[]
      return this.http.get(`${this.baseUrl}/countrylist`).pipe(map(res => res as Country[]));
}

Country.ts:

export class Country {
  id: number;
  country: string; //This is the data I want to get
  alpha2Code: string;
  alpha3Code: string;
  numericcode: string;

}

Я очень расстроен, так как уже пробовал несколько способов в течение недели :) но безуспешно.

Спасибо за предложения.

РЕДАКТИРОВАТЬ: MemberDetailsModel:

import {Memberstate} from "./memberstate";
import {Member} from "./member";
import {Contactinformation} from "./contactinformation";
import {Paymentinformation} from "./paymentinformation";


export class MemberDetailsModel {
  member: Member;
  state: Memberstate;
  contactinformations: Contactinformation[];
  paymentinformation: Paymentinformation;
}

Участник:

import { Membertype} from "../enums/membertype.enum";

export class Member {
  //properties from mm_mem

ber
      id: number;
      memberid: number;
      mainmemberid: number;
      membertype: Membertype;
      firstname: string;
      surname: string;
      birthdate: Date;
      nationality1id: number;
      nationality2id?: number;
      subscriptiondate?: Date;
      recorddate?: Date;
      defaultlanguage:String;
      billcategory: String;
      comment?: String;

    }

EDIT2: member-details.component. html:

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar>
      <i class="material-icons md-36">
        face
      </i>
    </div>
    <mat-card-title>Persönliche Daten</mat-card-title>
    <mat-card-subtitle>Stammdaten des Mitglieds</mat-card-subtitle>
    <div>
      <i class="material-icons">
        edit
      </i>
      <i class="material-icons">
        save
      </i>
    </div>
  </mat-card-header>
  <mat-card-content>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Vorname" required [(ngModel)]="memberDetailsData.member.firstname" name="firstname">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Nachname" value="{{memberDetailsData.member.surname}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="true" matInput placeholder="MitgliedsNr." value="{{memberDetailsData.member.memberid}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Mitgliedsart" value="{{memberDetailsData.member.membertype}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Hauptmitglied" value="{{memberDetailsData.member.mainmemberid}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Geburtsdatum" value="{{memberDetailsData.member.birthdate | date}}">
    </mat-form-field>
    <!--mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Nationalität 1" value="{{mapCountry(memberDetailsData.member.nationality1id).country}}">
    </mat-form-field-->
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Nationalität 1" value="{{memberDetailsData.member.nationality1id}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Nationalität 2" value="{{memberDetailsData.member.nationality2id}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Anmeldedatum" value="{{memberDetailsData.member.subscriptiondate | date}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Erfassungsdatum" value="{{memberDetailsData.member.recorddate | date}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Bevorzugte Sprache" value="{{memberDetailsData.member.defaultlanguage}}">
    </mat-form-field>
    <mat-form-field>
      <input [disabled]="inputsMemberDisabled" matInput placeholder="Rechnungskategorie" value="{{memberDetailsData.member.billcategory}}">
    </mat-form-field>
    <mat-form-field class="example-full-width">
      <textarea [disabled]="inputsMemberDisabled" matInput placeholder="Kommentar" value="{{memberDetailsData.member.comment}}"></textarea>
    </mat-form-field>

  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" [disabled]="!inputsMemberDisabled" (click)="toggleDisabledInputs()">Bearbeiten</button>
    <button mat-button mat-raised-button color="warn" [disabled]="inputsMemberDisabled" (click)="updateMemberInformation()">Speichern</button>
  </mat-card-actions>
</mat-card>

Answer 1

Вы можете использовать директиву *ngIf в части шаблона, где вы печатаете свои данные, чтобы проверить, установлены ли данные или нет. Если установлено, он будет отображать данные, иначе этот блок не будет отображаться в DOM. Например,

<div *ngIf = "memberDetailsData">

  <!-- Template part goes here -->

</div>

Или вы можете использовать троичную операцию при доступе к членам объекта.

memberDetailsData?.member при назначении значений полям ввода.

Надеюсь, что решает вашу проблему

Answer 2

• В функции getCountryList() службы global-data-service вы возвращаете простой массив Country, но он извлекается из Observable. Вам также лучше вернуть заметное из службы. Таким образом, мы можем быть уверены, что переменной this.countryList в компоненте member-details присвоено правильное значение.

global-data-service.ts

getCountryList(): Observable<Country[]> {
  const result = Subject<Country[]>();

  if (this.countryList.length < 1) {
    this.initializeCountryList().subscribe(
      res => {
        this.countryList = res;
        result.next(res);
      }
    );
  }

  return result.asObservable();
}

сведения о члене. component.ts

ngOnInit() {
  this.inputsMemberDisabled = true;
  this.memberid = this.route.snapshot.params['id'];

  this.globalDataService.getCountryList().subscribe(countries => { this.countryList = countries });
  this.getMemberDetails();
}

• В шаблоне HTML используйте необязательный оператор сцепления (?.), чтобы убедиться, что переменная определена первой перед обращением к ее свойствам. Поэтому замените все экземпляры memberDetailsData.member на memberDetailsData?.member. Это эквивалентно проверке, определено ли memberDetailsData перед доступом к его свойствам. Если вам нужно проверить, существуют ли дополнительные свойства, вы можете продолжить, как memberDetailsData?.member?.firstname.