javascript - 将新对象推入数组 angular 7 后视图没有更新？

Question

app.component.ts

   import { Component, NgZone } from '@angular/core';
import { ApiService } from './api.service';
import configData from './apiConfig.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  data: any = [];
  finalResponse: any = [];
  isLoadingResults = true;
  apiConfig = configData;
  private _apis: any = [];


  constructor(private api: ApiService, private ngZone: NgZone) {
  }

  // ngOnInit() {
  //   this._apis.push({name: "getRefills"});
  // }

  getMemberInfoCache(tokenId) {
    console.log(tokenId);
    this.api.getProducts(tokenId)
      .subscribe((res: any) => {
        /** @namespace res.details.cacheobject.specialtyMemberInfo **/
        this.data = res.details.cacheobject.specialtyMemberInfo;
        console.log("testDATA" , this.data);
        this.isLoadingResults = true;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });
  }
  loadApis(tokenId) {
    /** @namespace this.apiConfig._apisJson.getRefillsRequest **/
    const getRefillRequest = this.apiConfig._apisJson.getRefillsRequest;
    console.log("GETREFILLS", getRefillRequest);
    if(getRefillRequest) {
      // this._apis.push({name: "getRefills"});
      // console.log("INSIDE IF", getRefillRequest);
      this.ngZone.run(() => { this._apis.push({name: "getRefills" }); })
    }

    return this._apis;
  }


}

app.comp.html

<div class="card-body">
              <div class="container">
                <table class="table table-striped">
                  <thead>
                  <tr>
                    <th scope="col">Api</th>
                    <th scope="col">Request</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let item of _apis">
                    <td>
                      {{item.name}}
                    </td>
</tr>
</tbody>
</table>
</div>
</div>

标签： javascriptangulartwitter-bootstraptypescript