从api获取数据时，Angular 2+用ngFor填充html表

Question

I'm quite new to Angular so although I'm trying to accomplish something I guess it's not difficult I'm stuck and need your help.

What I need to do is to fill an html table with clients data on button click and after data is received from an api call.

I'm being able to display "fixed" data with ngFor if I define it as a public property of the TypeScript class as seen with clientsData1 (I leave it as an example), but cannot bind ngFor to variable containing json result (clientsData) changes.

In short, what I'm trying to do is when I click button I launch getItems method and as soon as getItems has a result I need to update the table.

This is my TypeScript class:

import {Component} from '@angular/core';
import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

@Injectable()
@Component({
  selector: 'demo-app',
  templateUrl: 'app/views/app.component.html'
})
export class AppComponent {
  public clientsData : string;
  private clientsUrl : string = 'http://www.mocky.io/v2/5808862710000087232b75ac';
  public clientsData1 : any = [{'id': 1}, {'id': 3}, {'id': 5}];
  constructor (private http: Http) { }
  ngOnInit() {
    let btnGetClients = document.getElementById("btnGetClients");
    btnGetClients.addEventListener("click", (e:Event) => this.getItems()
        .subscribe(
          ipdata => this.clientsData = ipdata.clientsJson
        ));
  }  
  getItems(): Observable<IPData> {    
        return this.http.get(this.clientsUrl)
                        .map(this.extractData);
  }
  extractData(res: Response) {
    return res.json();
  }
}
class IPData {
  public clientsJson : string;
}

And this is the html template:

<h1>Insurance App</h1>
<hr />
<button id="btnGetClients">Get Clients</button>
<br/><br/>
<table>
    <thead>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
    </thead>
    <tbody *ngFor="let client of clientsData">
        <tr>
            <td>{{client.id}}</td>
        </tr>
    </tbody>
</table>

Any help will be much appreciated.

Thanks.

Answer 1

Firstly this is bad practice to use any DOM manipulation in your TS files. You can add click event handler like this

<button (click)='getItemsSubscription()'>Get Clients</button>

and to iterate trough array that are not present from the moment when component are created you need to use ngFor like this

 <tbody *ngFor="let client of clientsData">
        <tr>
            <td>{{client?.id}}</td>
        </tr>
 </tbody

with a quote mark on client. Quote mark means that you will get your data rendered when you will have it on you component lexical environment, or won't render it at all.

And one more thing if you want to call data with a button click. When you calling to a function you are not subscribing to it, so you need to wrap it up and do something like this

  getItemsSubscription() {
       this.getItems().subscribe(
              ipdata => this.clientsData = ipdata.clientsJson
        }
  }