如何计算api服务的数据并以角度组件显示在卡片中

Question

我想在有角项目的卡片中显示，例如行的计数。要从 mysql 获取数据，我正在使用服务。

这里是服务数据：

 private _postsURL = "http://localhost:3003/all";

  constructor(private http: Http) {
    }

   getcount(): Observable<ICustomer[]> {
   return this.http
      .get(this._postsURL)
      .map((response: Response) => {
          return <ICustomer[]>response.json();
      })
      .catch(this.handleError);
    }

组件.ts

        getcount(): void {
        this.apiSerivce.getcount()
        .subscribe(
          resultArray => this._count = [resultArray[0]],
          error => console.log("Error :: " + error)
         )
         }

       ngOnInit(): void {
       this.getcount();

component.html

           <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12" *ngFor="let post of _count">
                        <h2 class="m-b-0"><i class="mdi mdi-buffer text- 
               warning"></i></h2>
                        <h3 class="">{{post}}</h3>
                        <h6 class="card-subtitle">Total Earnings</h6> 
                   </div>
                    <div class="col-12">
                        <ngb-progressbar [showValue]="false" 
             type="warning" [value]="50"></ngb-progressbar>

我只想使用从 api 获取的值来填充卡片。

Answer 1

API 响应是一个异步事件，并且 ngOnInit 方法执行在它从后端调用获得响应之前完成，因此，只有当 _count 变量绑定在其中获得值时，您才应该呈现卡片部分视图，您可以通过添加 ngIf 根卡 html 元素上的指令如下。

  <div class="card" *ngIf="_count?.length > 0">
            <div class="card-body">
                <div class="row">
                    <div class="col-12" *ngFor="let post of _count">
                        <h2 class="m-b-0"><i class="mdi mdi-buffer text- 
               warning"></i></h2>
                        <h3 class="">{{post}}</h3>
                        <h6 class="card-subtitle">Total Earnings</h6> 
                   </div>
                    <div class="col-12">
                        <ngb-progressbar [showValue]="false" 
             type="warning" [value]="50"></ngb-progressbar>