我从 GET 方法收到的数据没有在 html 页面上更新

Question

我正在尝试通过使用 Angular 应用程序上的 Web 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>

这是结果，即使我删除了 Loading 部分，它仍然显示一个空表。

Answer 1

我敢打赌，问题在于 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 上。 每个表格元素应该只有一个 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>

或者如果你想为每个buyerList生成新表，那么你必须把ngFor放在表本身

Answer 2

您的控制台图片显示全名和信用，但您的代码显示全名和信用。

Answer 3

将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 4

使用获取...

在组件中：

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)
      );
  }