Question

我正在开发一个使用Angular 7和bootstrap 4的网站，并且对Angular还是陌生的。我调用asp.net Web API来检索业务信息。这是正确返回数据。我的角度项目的设置是这样的，我有两个文件夹，一个用于模型，另一个用于/ 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>
******************************************************************************

Answer 1

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

请记住，Record_Number之类的C＃属性在JSON文件上被解析为record_Number

Answer 2

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

getSupplier(id: number): Observable<IBusiness> {
  return this._httpClient.get<IBusiness>('...').pipe(
    map(x => x.map(y => <IBusiness>{Id: y.prop, Record_Number: y.prop, Business_Name: y.prop}))
  )  
}

其中上面的prop是响应中要映射到界面中相应属性的属性。

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

2 个答案: