Question

我想在卡中以角度项目显示，例如row的计数。为了从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);
    }

component.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变量绑定中具有值的情况下，才应显示卡截面视图，并且可以通过添加实现根卡html元素上的 ngIf 指令如下。

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

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

1 个答案: