Question

我试图通过使用角度应用程序上的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));
  }

我也不认为您的HTM1有效。您不应该将ngFor放在身上。每个表元素应该只有一个躯干。

将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

将buyer.FullName更改为buyer.fullName，将buyer.Credit更改为buyer.credit，并将*ngFor迭代应在tr标签上进行，而不要在{ {1}}标签

tbody

Answer 3

您的控制台图片显示了FullName和Credit，但是您的代码显示了FullName和Credit。

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

我从GET方法接收的数据未在html页上更新

4 个答案: