Передача get данных в Angular 4+

311

26 сентября 2017, 04:10

Привет, столкнулся с такой проблемой. Есть API на asp.net core 2.0 и приложение на Angular 4+. Проблема в том, что api отдает информацию, но angular не производит вывод. Не могу понять в чем проблема.

Код контроллера:

 [HttpGet]
    public IEnumerable<OcItem> GetAll()
    {
        return _context.ocItems.ToArray();
    }

app.component.ts:

import {TemplateRef, ViewChild} from '@angular/core'; 
import { Component, OnInit } from '@angular/core'; 
import { OcService } from './oc.service'; 
import { Oc } from './Oc'; 
import {Headers, Response} from '@angular/http'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  providers: [OcService] 
}) 
export class AppComponent implements OnInit { 
  @ViewChild('readOnlyTemplate') readonlyTemplate: TemplateRef<any>; 
  @ViewChild('editTemplate') editTemplate: TemplateRef<any>; 
 
  editedOc: Oc; 
  ocs: Array<Oc>; 
  isNewRecord: boolean; 
  statusMessage: string; 
 
  constructor(private serv: OcService){ 
    this.ocs = new Array<Oc>(); 
  } 
 
  ngOnInit(){ 
    this.loadOc(); 
  } 
 
  //Загрузка списка 
  private loadOc(){ 
    this.serv.getOc().subscribe((resp: Response) =>{ 
      this.ocs = resp.json(); 
      console.log(resp); 
    }) 
  }

oc.service.ts:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Response, Headers } from '@angular/http'; 
import { Oc } from './Oc'; 
 
@Injectable() 
export class OcService{ 
    private url = "http://localhost:57034/api/values"; //http://localhost:57035/api/values 
    constructor(private http: Http){} 
 
    getOc(){ 
        return this.http.get(this.url); 
    } 
 
    UpdateOc(pcname: string, obj: Oc){ 
        let headers = new Headers({ 'Content-Type': 'application/json;text/plain'}); 
        const body = JSON.stringify(obj); 
        return this.http.put(this.url + '/' + pcname, body, {headers: headers}); 
    } 
}

app.component.html

<h1>HEAVYBOOT</h1> 
<table class="table table-striped"> 
    <thead> 
        <tr> 
            <td>Поставь галку, если надо пнуть</td> 
            <td>Pcname</td> 
            <td>DateServer</td> 
            <td>DateClient</td> 
            <td>ImportTime</td> 
            <td>ExportTime</td> 
            <td></td> 
            <td></td> 
        </tr> 
    </thead> 
    <tbody> 
        <tr *ngFor="let oc of ocs"> 
            <ng-template [ngTemplateOutlet]="loadTemplate(oc)" 
                         [ngOutletContext]="{ $implicit: oc }"> 
            </ng-template> 
        </tr> 
    </tbody> 
</table> 
<div>{{statusMessage}}</div> 
 
<!-- Шаблон для чтения --> 
<ng-template #readonlyTemplate let-oc> 
    <td>{{oc.IsComplite}}</td> 
    <td>{{oc.Pcname}}</td> 
    <td>{{oc.DateServer}}</td> 
    <td>{{oc.DateClient}}</td> 
    <td>{{oc.ImportTime}}</td> 
    <td>{{oc.ExportTime}}</td> 
    <td> 
        <input type="button" value="Изменить" class="btn btn-default" (click)="editOc(oc)"/> 
    </td> 
</ng-template> 
 
<!-- Шаблон для редактирования --> 
<ng-template #editTemplate> 
    <td> 
        <input type="checkbox" id="chk_{{editedOc.Pcname}}" [(ngModel)]="editedOc.IsComplite" class="form-control" /> 
    </td> 
    <td> 
        <input type="text"  [(ngModel)]="editedOc.Pcname" readonly disabled class="form-control" /> 
    </td> 
    <td> 
        <input type="text" [(ngModel)]="editedOc.DateServer" readonly disabled class="form-control" /> 
    </td> 
    <td> 
        <input type="text" [(ngModel)]="editedOc.DateClient" readonly disabled class="form-control" /> 
    </td> 
    <td> 
        <input type="text" [(ngModel)]="editedOc.ImportTime" readonly disabled class="form-control" /> 
    </td> 
    <td> 
        <input type="text" [(ngModel)]="editedOc.ExportTime" readonly disabled class="form-control" /> 
    </td> 
    <td> 
        <input type="button" value="Пнуть" (click)="saveOc()" class="btn btn-success" /> 
    </td> 
    <td> 
        <input type="button" value="Отмена" (click)="cancel()" class="btn btn-warning" /> 
    </td> 
</ng-template>

Ошибок в консоли нет

Answer 1

Если у вас Angular 4.4, то переходите на HttpClient, на хабр делал перевод недавно про него, там как минимум JSON как транспорт по умолчанию, и не нужно его туда сюда переводить.

а по вашему вопросу у Вас судя по всему ошибка в том что Вы упустили data.