Angular 角度7对组件映射或插值的服务响应

我正在开发一个带有Angular 7和bootstrap 4的网站，我是Angular的新手。我调用asp.net Web API来检索业务信息。这将正确返回数据。我的angular项目的设置是这样的，我有两个文件夹，一个用于模型，另一个用于/src/app下的服务，以及每个组件的相应文件夹。请查看所有部件的代码

我尝试在不同的地方记录响应。它记录对象但不记录属性，属性值未定义

app.module.ts
*******************************************************************
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './supplier/dashboard.component';
import { TestComponent } from './test/test.component';
import { SupplierService } from './services/supplier.service';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [SupplierService],
  bootstrap: [AppComponent]
})
export class AppModule { }
**************************************************************************
supplier.service.ts
**************************************************************************
import { Injectable } from '@angular/core';
import { IBusiness } from './../models/business.model';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable ({
  providedIn: 'root'
})

export class SupplierService {

  constructor(private _httpClient: HttpClient){

  }

  getSupplier(id: number): Observable<IBusiness> {
    return this._httpClient.get<IBusiness>('http://localhost:55970/api/supplier/' + id);   

  }
}
******************************************************************************
business.model.ts ======= I tried to make use of class and Interface, both approach didn't work
******************************************************************************
export interface IBusiness {
   Id: number;
  Record_Number: string;
  Business_Name: string;
 }

OR

export class Business {

   constructor(public Id: number, public Record_number: string, public Business_Name: string) {

    } 
}

******************************************************************************
business.component.ts
******************************************************************************
import { Component, OnInit } from '@angular/core';
import { SupplierService } from '../services/supplier.service';
import { IBusiness } from '../models/business.model';

@Component({
  selector: 'app-root',
  //templateUrl: './business.component.html',
  template: `<h1>Hello {{ name }} {{ supplier.Record_Number}}</h1>`,  ------> name property value is displayed but not supplier property
  styleUrls: ['./business.component.css']
})
export class BusinessComponent implements OnInit {
  supplier: IBusiness;
  name: string

  constructor(public supplierService: SupplierService) {
    this.name = "Test Name";
   }

  ngOnInit() {
    this.supplierService.getSupplier(1001).subscribe((result: IBusiness) => {
console.log(result); ------>>>>>> i see this in console

//{
//<Record_Number>k__BackingField: "00230367CM"
//}
console.log(JSON.stringify(result)); ------>>>>>> i see this in console
//{
//"<Record_Number>k__BackingField":"00230367CM"
//}

      console.log(result.Record_Number);
      console.log(result); ----->>> this logs the object with all the db values. But property values are not mapped to the angular object
      this.supplier = result;
      console.log(this.supplier.Record_Number);
      console.log(result.Record_Number);
    });

  }

}
******************************************************************************
business.component.html
******************************************************************************
<div class="container" style="height:50%">
  <div class="card">
    <div class="card-header">
      <h6>{{ supplier.Business_Name }}</h6>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-body">
              <div class="card-text"> RecordNumber: {{ supplier.Record_Number }} </div>
              <div class="card-text"> Name: {{ supplier.Business_Name }} </div>                  
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>
******************************************************************************

app.module.ts
*******************************************************************
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{ReactiveFormsModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/common/http'导入{HttpClientModule}；
从“./app routing.module”导入{AppRoutingModule}；
从“./app.component”导入{AppComponent}；
从“./login/login.component”导入{LoginComponent}；
从“./supplier/dashboard.component”导入{DashboardComponent}；
从“./test/test.component”导入{TestComponent}；
从“./services/supplier.service”导入{SupplierService}；
@NGD模块({
声明：[
应用组件，
LoginComponent，
仪表板组件，
测试组件
],
进口：[
浏览器模块，
批准模块，
反应形式模块，
FormsModule，
HttpClientModule
],
提供者：[供应商服务]，
引导：[AppComponent]
})
导出类AppModule{}
**************************************************************************
supplier.service.ts
**************************************************************************
从“@angular/core”导入{Injectable}；
从“/../models/business.model”导入{IBusiness}；
从'@angular/common/http'导入{HttpClient，HttpResponse}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
出口类供应商服务{
构造函数（私有_httpClient:httpClient）{
}
getSupplier（id:编号）：可观察{
返回此。\u httpClient.get（'http://localhost:55970/api/supplier/“+id）；
}
}
******************************************************************************
business.model.ts=====我尝试使用类和接口，但两种方法都不起作用
******************************************************************************
导出接口IBusiness{
Id：编号；
记录编号：字符串；
业务名称：字符串；
}
或
出口类业务{
构造函数（公共Id:编号、公共记录\编号：字符串、公共业务\名称：字符串）{
} 
}
******************************************************************************
business.component.ts
******************************************************************************
从“@angular/core”导入{Component，OnInit}；
从“../services/supplier.service”导入{SupplierService}；
从“../models/business.model”导入{IBusiness}；
@组成部分({
选择器：'应用程序根'，
//templateUrl:“./business.component.html”，
模板：`Hello{{name}{{supplier.Record_Number}}`，显示的是名称属性值，但不是供应商属性值
样式URL:['./business.component.css']
})
导出类BusinessComponent实现OnInit{
供应商：IBusiness；
名称：string
建造商（公共供应商服务：供应商服务）{
this.name=“测试名称”；
}
恩戈尼尼特（）{
this.supplierService.getSupplier（1001）.subscribe（（结果：IBusiness）=>{
日志（结果）----->>>>>>>我在控制台中看到了这一点
//{
//k__背景场：“00230367CM”
//}
log（JSON.stringify（result））；----->>>>>>我在控制台中看到了这一点
//{
//“k__BackingField”：“00230367CM”
//}
控制台日志（结果记录编号）；
console.log（result）；------>>>这将使用所有db值记录对象。但是属性值不会映射到角度对象
此参数为供应商=结果；
console.log（此.supplier.Record_编号）；
控制台日志（结果记录编号）；
});
}
}
******************************************************************************
business.component.html
******************************************************************************
{{supplier.Business_Name}
记录编号：{{supplier.Record_Number}
名称：{{supplier.Business_Name}
******************************************************************************

在我看来，服务器响应没有正确实现IBusiness接口。 IBusiness上的属性是否与服务器响应中的对象属性同名

---

请记住，像

Record\u Number

这样的C#属性在JSON文件上被解析为

Record\u Number

，我们从评论中收集到，您从响应中获得了更多属性，还有一些属性似乎与您的接口不匹配。然后，您需要告诉Angular，您想要哪些属性以及如何映射它们。像这样：

getSupplier（id:number）：可观察{
返回此。\u httpClient.get（“…”）.pipe(
map（x=>x.map（y=>{Id:y.prop，记录编号：y.prop，业务名称：y.prop}））
)  
}

---

其中，上面的

prop

是您希望映射到界面中相应属性的响应中的属性

您的模板可能会中断，因为您在模板中引用了供应商（在这种情况下，您应该看到和错误消息）供应商可能还未定义，因为服务呼叫可能需要一些时间。你能在供应商后面加一个“？”吗？所以它看起来像{{supplier？.Record{u number}。它叫做安全导航操作符（）我试过这个{{supplier？.Record_number}}，仍然没有定义你能确保你的订阅中返回JSON吗？我看到了