Считывание данных из Asp.net Core в Angular 7

Question

Добрый день,

Я занимался самообучением в Angular 7 и Asp.net Core API.

А теперь я хочу прочитать результат из ядра asp.net и показать его в Angular 7.

Это код из Asp.net Core

[HttpPost("DataCorrection")]
        public  IActionResult DataCorrection([FromBody] DataCorrectionDto data)
        {
            try
            {
                var request =  Request;
                var values =   _dataCorrection.GetDateRange(data.StartDate, data.EndDate);

                return Ok(values);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                Console.WriteLine(ex.StackTrace);
                throw ex;
            }
        }

Метод GetDateRange возвращает список DataCorrection Model

А это мой угловой код

     import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,  } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data-correction',
  templateUrl: './data-correction.component.html',
  styleUrls: ['./data-correction.component.css']
})
export class DataCorrectionComponent implements OnInit {
  list: any[];
  selectedDate = new Date();
  form = new FormGroup({
    StartDate: new FormControl(),
    EndDate: new FormControl()
  });

  constructor(private http: HttpClient) { }
  ngOnInit() {
  }

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      this.list = res as any[];
      console.log('Called');
      });
  }

}

А это HTML-код

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <!-- <input formControlName="first" [(ngModel)]="value"> -->
    <mat-form-field>
      <input matInput formControlName="StartDate"  [matDatepicker]="StartDate" placeholder="Start date">
      <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
      <mat-datepicker #StartDate  ></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
        <input matInput formControlName="EndDate"   [matDatepicker]="EndDate" placeholder="End date">
        <mat-datepicker-toggle matSuffix [for]="EndDate"></mat-datepicker-toggle>
        <mat-datepicker #EndDate  ></mat-datepicker>
      </mat-form-field>
    <div class="form-group">
      <button class="btn btn-primary">Submit</button>
  </div>
  </form>

  <tr *ngFor="let pd of list">
      <td >{{pd.ActualLogin}}</td>
      <td >{{pd.ActualLogout}}</td>
      <td >{{pd.ShiftLogin}}</td>
      <td>
        <i class="far fa-trash-alt fa-lg text-danger" ></i>
      </td>
    </tr>

А теперь, как мне правильно его прочитать, чтобы я мог загрузить его в таблицу.

С кодом выше. Это даже не заполняет стол. Но это вызывает console.log

Я пытался часами искать решение. Но я потерялся. Я не понимаю учебники, и я не могу заставить его работать.

Это ответ от моего веб-API. Я прочитал это на вкладке response в браузере Chrome

{"emp_Id":963,"actualLogin":"05:00:11","actualLogout":"05:01:00","shiftLogin":"05:00:00","shiftLogout":"13:00:00","date":"2019-04-03T00:00:00Z"}

Это то, что я хочу заполнить в таблице

Спасибо.

Answer 1

Я не думаю, что это была проблема,

в вашем шаблоне есть ошибка заклинания, pd.ActualLogin, но на самом деле в ответе JSON это пишется как actualLogin.Измените свой шаблон на

   <tr *ngFor="let pd of list">
      <td >{{pd.actualLogin}}</td>
      <td >{{pd.actualLogout}}</td>
      <td >{{pd.shiftLogin}}</td>
      <td>
        <i class="far fa-trash-alt fa-lg text-danger" ></i>
      </td>
    </tr>

Answer 2

Вы делаете междоменный запрос, потому что ваше API и приложение Angular обслуживаются на разных портах.Вы можете либо добавить заголовок cors, чтобы принимать все домены в вашем API (не рекомендуется), либо настроить файл proxy.config.json так, чтобы ваши вызовы API перенаправлялись на тот же порт, что и ваше приложение Angular.

{
  "/api/*": {
    "target": "http://localhost:5000/api/",
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  }
}

И в вашем Angular используйте / api / DataCorrection / DataCorrection вместо http://localhost:5000/api/DataCorrection/DataCorrection

Затем подайте с

ng serve --proxy-config proxy.config.json

Answer 3

Сохранить результат в некоторой переменной

пример

this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      result = res;
      console.log('Res ' + res);
    });

И попробуйте отобразить в пользовательском интерфейсе

пример

<div>{{result|json}}</div>

Это отобразит результатв формате json

Примечание: используйте ngFor для отображения результата в таблице на основе вашего выходного формата