Hi, faced such a problem. There is an API on asp.net core 2.0 and an application on Angular 4+. The problem is that api gives information, but angular does not produce output. I can not understand what the problem is. enter image description here

Controller Code:

[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> 

There are no errors in the console

  • one
    resp.body.json() - Artsiom

1 answer 1

If you have Angular 4.4, then go to the HttpClient , Habr did the translation recently about it, there is at least JSON as the default transport, and you don’t need to transfer it here and there.

And on your question, you apparently have an error in that you missed data .

 this.ocs = resp.json().data; 
  • unfortunately did not help - Dmitry Shimanov