Angular 9: Как мне получить свойства объекта, возвращенные из вызова службы rest api

Question

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

Вот пример объекта в endcustomer.ts :

export interface IEndCustomer {
  endCustomerId: number;
  endCustomerName: string;
  fein: string;

Вот где я вызываю свой REST API в endcustomer.service.ts :

import { Injectable } from '@angular/core'
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { IEndCustomer } from './endcustomer';
import { Observable, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

export class EndCustomerService {
  private APIurl2 = "https://localhost:44331/api/endcustomer/GetEndCustomerById";

  constructor(private http: HttpClient) { }

  getEndCustomerById(id) {
    return this.http.get<IEndCustomer>(this.APIurl2 + "/" + id);
}

И здесь я пытаюсь создать форму, используя сведения об одном конечном клиенте, в endcustomer_detail.component.ts :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { IEndCustomer } from './endcustomer';
import { EndCustomerService } from './endcustomer.service';

@Component({
  selector: 'endcustomer',
  templateUrl: './endcustomer_detail.component.html'
})

export class EndCustomerDetailComponent implements OnInit {
  pageTitle: string = 'Customer Detail'
  customer: IEndCustomer;
constructor(private endcustomerService: EndCustomerService) { }

 ngOnInit() {
    let id = +this.route.snapshot.paramMap.get('id');

    this.endcustomerService.getEndCustomerById(id).subscribe({
      next: customer => {
        this.customer.endCustomerId = customer.endCustomerId;
        this.customer.endCustomerName = customer.endCustomerName;
        this.customer.fein = customer.fein;
  }
}

Проблема в том, что я получаю сообщение об ошибке, что "Property 'endCustomerId' не существуют по типу 'unknown', с волнистой красной линией под свойством: this.customer.endCustomerId = customer. endCustomerId . Я не понимаю, почему клиент указан как 'unknown'.

Если я попробую « this.customer.endCustomerId = customer;», появится сообщение об ошибке: «Тип« неизвестный »не может быть назначен типу« число ».

Если я попробую» this.customer = customer; " то появляется сообщение об ошибке: «Тип '{}' не имеет следующих свойств из типа 'IEndCustomer': endCustomerId, endCustomerName, fein"

Я пробовал несколько разных вещей, потому что все примеры на Inte rnet кажется, организовано немного иначе, но я просто не понимаю. Может ли кто-нибудь объяснить, что я делаю неправильно, и если есть лучший способ получить свойства моего возвращенного объекта, чтобы у меня был endCustomer, который я затем могу использовать на странице html для отображения идентификатора и имени, пожалуйста ?

Answer 1

Что произойдет, если вы скомпилируете код? Он может компилироваться без ошибок. Насколько я понимаю, это могут быть ошибки TS Lint.

Если вы используете sh для удаления волнистых красных линий, попробуйте следующее:

Сервис

getEndCustomerById(id): Observable<IEndCustomer> {   // <-- mention return type
  return this.http.get<IEndCustomer>(this.APIurl2 + "/" + id);
}

Компонент

ngOnInit() {
  let id = +this.route.snapshot.paramMap.get('id');
  this.endcustomerService.getEndCustomerById(id).subscribe(
    customer => { this.customer = customer },
    error => { // always good practice to handle HTTP errors }
  );
}

Answer 2

Привет, чтобы эта функция работала, вы должны использовать лямбда-функцию.

Преобразуйте подписку в

 this.endcustomerService.getEndCustomerById(id).subscribe(customer=>{
    this.customer.endCustomerId = customer.endCustomerId;
    this.customer.endCustomerName = customer.endCustomerName;
    this.customer.fein = customer.fein;
})

Проблема с синтаксисом, который вы предоставили, заключается в том, что изменение контекста, и поскольку в другом контексте нет такого ojbejct, как клиент, это приведет к нулевому