Angular 7 сервисный отклик на отображение или интерполяцию компонентов - PullRequest
Новая
       15

Angular 7 сервисный отклик на отображение или интерполяцию компонентов

1 голос
/ 27 марта 2019

Я занимаюсь разработкой веб-сайта с Angular 7 и начальной загрузкой 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>
******************************************************************************

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

Мы собрали из комментариев, что вы получаете намного больше свойств из вашего ответа, также некоторые из них, кажется, не соответствуют вашему интерфейсу.Затем вам нужно указать 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 в приведенном выше - это свойства ответа, который вы хотите сопоставить с соответствующими свойствами в вашем интерфейсе .

0 голосов
/ 27 марта 2019

Мне кажется, что ответ сервера не правильно реализует интерфейс IBusiness.Свойства в IBusiness совпадают с именами свойств объекта из ответа сервера?

Помните, что свойства C #, такие как Record_Number, анализируются в файлах JSON как record_Number

...