Данные, которые я получаю от метода GET, не обновляются на HTML-странице

Question

Я пытаюсь просто показать информацию о покупателе (класс модели), извлекая данные из базы данных с помощью веб-API в угловом приложении.Проблема в том, что данные, которые я получаю, не отображаются на HTML-странице, и я не могу найти решение для этого.Вот мой класс обслуживания:

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'
import {Buyer} from'./buyer.model'
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

@Injectable()
export class OneBuyerService {

  SelectedBuyer : Buyer;
  constructor(private http : HttpClient) {}
  postBuyer(buyer: Buyer)
  {
    return this.http.post('http://localhost:54632/api/Buyers',buyer);
  }


  getBuyers(): Observable<Buyer[]>
  {
    return this.http.get('http://localhost:54632/api/Buyers').map(res=>
    {
        let buyers = res;
        return buyers;
    })
    .catch(this.handleError);
  }

  getBuyersbyID(id: string): Observable<Buyer[]>
  {
    return this.http.get('http://localhost:54632/api/Buyers/'+id).map(res => res).catch(this.handleError)
  }

  private handleError(error: any)
  {
    console.log('server error: ', error);
    if(error instanceof Response)
    {
      let errMessage = '';
      try
      {
        errMessage = error.statusText;
      }
      catch
      {
        errMessage = error.statusText;
      }
      return Observable.throw(errMessage);
    }
    return Observable.throw(error || 'ASP.net server error');
  }
} 

Вот мой класс компонентов:

import { Component,Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { OneBuyerService } from '../shared/one-buyer.service';
import { Buyer } from '../shared/buyer.model';

@Component({
  selector: 'app-buyer-list',
  templateUrl: './buyer-list.component.html',
  styleUrls: ['./buyer-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BuyerListComponent implements OnInit {

  @Input() buyers : Buyer[];

  constructor(private oneBuyerService : OneBuyerService) {}
  loading:boolean = true;
  buyersList : Buyer[];
  ngOnInit() {
    this.getBuyers();
    //  const me = this;
    //  me.oneBuyerService.getBuyers().subscribe(res =>
    //   { 
    //     me.buyersList = res as Buyer[];
    //     this.loading = false;
    //     console.log(this.buyersList);
    //   });
  }

  getBuyers()
  {
    this.oneBuyerService.getBuyers()
      .subscribe((buyers:Buyer[]) => 
      {
        this.buyersList = buyers;
        this.loading = false;
      }, 
      (error: any) => console.log(error),
      () => console.log(this.buyersList));
  }

}

Вот мой HTML-код:

<div *ngIf="loading">
  Loading, Please Wait ...
</div>
<div *ngIf="!loading">
  <table class="table table-sm table-hover">
    <tr>
      <th>Full Name</th>
      <th>Credit</th>
    </tr>
    <tbody *ngFor="let buyer of buyersList">
      <tr>
        <td>{{buyer.FullName}}</td>
        <td>{{buyer.Credit}}</td>
        <td><button class="btn btn-sm btn-outline-danger">X</button></td>
      </tr>
    </tbody>
  </table>
</div>

Вот результат идаже если я удаляю часть «Загрузка», она все равно показывает пустую таблицу.

Answer 1

Использование get ...

В компоненте:

ngOnInit() {
  this.oneBuyerService.loadBuyers();
}

get buyersList(): Buyer[] {
  return this.oneBuyerService.buyers;
}
get loading(): boolean {
  return this.oneBuyerService.loading;
}

В обслуживании:

buyers: Buyers[];
loading: boolean;

  loadBuyers()
  {
    this.http.get('xxx')
      .subscribe(
        (buyers:Buyer[]) => {
          this.buyers= buyers;
          this.loading = false;
        }, 
        (error: any) => console.log(error),
        () => console.log(this.buyersList)
      );
  }

Answer 2

Измените buyer.FullName на buyer.fullName и buyer.Credit на buyer.credit и *ngFor итерацию следует выполнять для tr тега, а не tbody тега

<tr *ngFor="let buyer of buyersList">
    <td>{{buyer.fullName}}</td>
    <td>{{buyer.credit}}</td>
    <td><button class="btn btn-sm btn-outline-danger">X</button></td>
</tr>

Answer 3

На вашем изображении консоли отображается полное имя и кредит, а в вашем коде - полное имя и кредит.

Answer 4

Бьюсь об заклад, проблема в том, что changeDetection: ChangeDetectionStrategy.OnPush

Можете ли вы попытаться получить ссылку в вашем конструкторе, как показано ниже:

constructor(private changeDetectorRef: ChangeDetectorRef) {}

И измените свой метод следующим образомэто:

getBuyers()
  {
    this.oneBuyerService.getBuyers()
      .subscribe((buyers:Buyer[]) => 
      {
        this.buyersList = buyers;
        this.loading = false;
        this.changeDetectorRef.markForCheck();
      }, 
      (error: any) => console.log(error),
      () => console.log(this.buyersList));
  }

Также я не думаю, что ваш HTMl действителен.Вы не должны ставить свой ngFor на себя.У каждого элемента таблицы должен быть только один элемент tbody.

Переместите ваш элемент ngFor к элементу tr, и он должен работать.

Как здесь

<div *ngIf="loading">
  Loading, Please Wait ...
</div>
<div *ngIf="!loading">
  <table class="table table-sm table-hover">
    <tr>
      <th>Full Name</th>
      <th>Credit</th>
    </tr>
    <tbody>
      <tr *ngFor="let buyer of buyersList">
        <td>{{buyer.FullName}}</td>
        <td>{{buyer.Credit}}</td>
        <td><button class="btn btn-sm btn-outline-danger">X</button></td>
      </tr>
    </tbody>
  </table>
</div>

Или, если вы хотите сгенерироватьНовая таблица для каждого покупателя. Затем вы должны положить ngFor на саму таблицу