Вызов GET ASP .NET core 2.1 Web API из клиентского приложения Angular 6+ не возвращает никаких данных.

Question

Я создал веб-API get, который возвращает один объект. Когда я вызываю этот API, набирая URL в браузере, он отображает данные в формате JSON в окне браузера, как и ожидалось. Но когда я вызываю тот же API из моего углового В приложении данные не определены. Может кто-нибудь помочь, что не так с моим кодом?

Я пытался вызвать веб-API из моего углового приложения, которое возвращает массив строк. Я не получаю даже строки в моем угловом приложении.

app.component.html

<div style="text-align:center" class="container mt-2">
    <button (click)="search()">test</button>
    <ul>
        <li *ngFor="let item of Candidate">
        <h1>{{item.Name}}</h1>
        </li>
    </ul>   
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { CandidateServicesService } from './candidate-services.service';
import { Candidate } from './core/models/Candidate.mode';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
    candidate: Candidate[];
    constructor(private service: CandidateServicesService) { }
    search():void {
        this.service.getCandidateByPosId(101)
        .subscribe((data) => {
                this.candidate = data;
        });
    }
}

кандидат-services.services.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { Candidate } from "./core/models/Candidate.mode";
@Injectable({
  providedIn: "root"
})
export class CandidateServicesService {
  constructor(private httpClient: HttpClient) {}

  baseUrl: string = "http://localhost:44370/api/Candidate";

  getCandidateByPosId(posId: number): Observable<Candidate> {
    return this.httpClient.get<Candidate>(this.baseUrl + "/" + posId);
  }
}

candid.mode.ts (класс модели кандидата)

export class Candidate {
  candidateId: number;
  name: string;
  email: string;
  phone: string;
  skills: string;
}

asp .net core Web Api

// Отображает «Неизвестную ошибку» на угловой стороне.

[HttpGet ("{id}")]
public IActionResult<Candidate> GetBestCandidate (int id) {
    Candidate candidate = new Candidate {
        CandidateId = 1, Name = "John Smith",
            Email = "John.smith@gmail.com",
            Phone = "987654321", Skills = "test"
    }
    return candidate;
}

Answer 1

Возвращая что-то типа ActionResult (как здесь), требуется предоставить правильный код состояния с вашими данными.

Наиболее распространенный код состояния, который вы используете: 200 OK и 403 Unathorized (возможно, 404 Not found тоже). Несмотря на то, что вы сосредоточены на данных для своего клиента, используемая вами среда (.NET Core) рассматривает их как вторичный контент, тогда как основная часть - это ясность в том, как все прошло.

Итак, предоставив данные и , объясняющие, что операция прошла так, как предполагалось, будет достигнута

public ActionResult(...)
{ ...
  return Ok(someData);
}

пока говорят, что что-то пошло не так,

public ActionResult(...)
{ ...
  return NotFound(someData);
}

В службе вашего компонента в Angular вы подписываетесь на операцию и получаете два разных объекта в зависимости от того, о каком результате сообщалось.

...
this.httpClient.get(...)
  .subscribe(
    success => console.log(success),
    error => console.log(error)
  );

Кроме того, чтобы быть абсолютно уверенным, я бы остановил процесс контроллера и посмотрел, что возвращается, чтобы избежать глупых случаев, когда «ошибка» заключается в том, что вы все делаете правильно, но имя клиента на самом деле null undefined из-за резких скачков тестовых данных.

Answer 2

Проблема может заключаться в том, что вы включаете https для вашего веб-API, поэтому измените baseUrl на https:

baseUrl: string = "https://localhost:44370/api/Candidate";

Answer 3

Вы должны использовать

    return Ok(candidate);