Angular5 / 6

Question

我是angular5 / 6的新手。从静态数据中使用* ngFor可以正常工作，但是从服务器获取数据时表无法更新 此HTML表格没有更新

{{userList | json}}--this shows []
<div class="container color-light">
<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let y of userList">
    <td>{{y.id}}</td>
    <td>{{y.name}}</td>
  </tr>
</table>

但组件

中接收到数据

userList:JsonListInterface[]=[];
  ngOnInit() {
this.callingDataFromHttp();}

callingDataFromHttp(){
 this.listS.getData().subscribe(function(response){
   this.userList = response;
   console.log(this.userList);//this shows proper array with id and name
 });}

任何人都可以告诉我我要去哪里了，因为即使获取数据后，前端表还是空的。

Answer 1

TS

    userList: object;
    ngOnInit() {
        this.callingDataFromHttp();
    }

    callingDataFromHttp(){
        this.listS.getData().subscribe(response =>{
            this.userList = response;
         });
    }

HTML

<div class="container color-light">
<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let user of userList">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
  </tr>
</table>