Не читать информацию веб-API в angular

Question

Я изучаю Angular و и хочу добавить WebApi, созданный в Asp. Net Core به, в мой проект, но у меня возникают проблемы при печати информации.

Шаг 1: приложение .module.ts

import {HttpClientModule} from '@angular/common/http'
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule],

Шаг 2: person-servise.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IPerson } from 'src/IPerson';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PersonServiseService {

  constructor(private http:HttpClient) { }
  private Url:string='https://localhost:44365/api/todo';
  getDate():Observable<IPerson[]>
  {
    return  this.http.get<IPerson[]>(this.Url);
  }
}

Шаг 3: Создать IPerson в Sr c

export interface IPerson
{
    Id:number,
    FName:string,
    LName:string,
    Age:number
}

Шаг 4: app.component.ts

import { Component, OnInit } from '@angular/core';
import { PersonServiseService } from './person-servise.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ProjectTwo';
  constructor(private _persen:PersonServiseService){  } 
  ngOnInit(){
    this._persen.getDate().subscribe(data=> this.persen=data);
  }
  persen:any[]=[];
}

Шаг 5: app.component. html

<table>
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
  </thead>
  <tbody *ngFor="let item of persen">
    <td>{{item.Id}}</td>
    <td>{{item.FName}}</td>
    <td>{{item.LName}}</td>
  </tbody>
</table>

Я протестировал WebApi, созданный с использованием Asp. Net Core Post с программным обеспечением Postman, и операции Get, Post, Put, Delete работают нормально, но не отображаются в выводе Angular.

вложение:

public class TodoItem
{
    public long Id { get; set; }
    public string FName { get; set; }
    public string LName { get; set; }
    public int Age { get; set; }
}

Answer 1

Был только один вопрос для меня, что я использовал прописные буквы в моей пропе, так зачем конвертировать в строчные? -

Вы можете избежать использования имени свойства в нижнем регистре, указав настройки ниже в своем asp. net core web api startup.cs.

Если вы используете asp. net core 2.2, просто используйте:

services.AddMvc().AddJsonOptions(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

Если вы используете asp. net core 3.0+, добавьте пакет Microsoft.AspNetCore. Mvc .Newtonsoft Json для вашей версии и использования:

services.AddControllers().AddNewtonsoftJson(options =>
    {                
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();

    });

См. Почему в ответе контроллера вводятся имена полей модели в нижнем регистре?

Answer 2

В машинописном тексте / javascript корпус имеет значение. Ваш корпус в вашем шаблоне отличается от корпуса свойств / полей, которые возвращаются в вызове API. Исправьте код на стороне сервера или на стороне клиента, чтобы они совпадали.

Пример:

<tbody *ngFor="let item of persen">
  <td>{{item.id}}</td>
  <td>{{item.fName}}</td>
  <td>{{item.lName}}</td>
</tbody>

export interface IPerson
{
    id:number,
    fName:string,
    lName:string,
    age:number
}

Answer 3

Вы должны знать, что JSON, который возвращается API, является верблюжьим, а не pascal (как свойства в C#). В свойствах Typescript учитывается регистр, поэтому вы должны следовать наименованию свойства case верблюда, а не pascal case case.

Если вы хотите сохранить верблюжий корпус, вы можете использовать его в>. NET Core 3

services.AddControllers()
    .AddJsonOptions(jo => jo.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase)

предыдущие версии должны использовать

services.AddMvc()
    .AddJsonOptions(jo=> jo.UseMemberCasing())

Answer 4

Я подозреваю, что это потому, что вы переназначаете ссылку на this.persen в подписке. Ваше представление по-прежнему ссылается на ссылку, созданную этим: persen: any [] = [];

Либо добавьте свои элементы в блоке подписки в существующий массив persen, либо используйте асинхронное связывание c в представлении