在角度4的网格中显示JSON数组数据

Question

我想用来自服务的html显示数据。

下面是我的 component.ts 代码

url:string="http://localhost:63563/Api/user/GetCheckBoxes";
ErrorMessage : boolean = false;

userdata(){
    this.http.get(this.url).subscribe((res)=>{
        this.arrBirds = res.json() as Application[];
        console.log(this.arrBirds)
    });
}

我从服务中获得的答复如下

"Table": [
    {
      "intUserId": 1109,
      "vcrFirstName": "sdvlbs",
      "vcrLastName": "dsbvsdfn",
      "vcrLoginName": "!@#DBASDI?\"|}",
      "vcrPassword": "twst#123",
      "vcrStatus": "InActive",
      "vcrIsClient": "eClerx",
      "vcrEmail": "sdvlbs.dsbvsdfn@test.com",
      "vcrRole": "Analyst,Auditor,Team Lead,Manager",
      "Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
    },
    {
      "intUserId": 1121,
      "vcrFirstName": "(*&&)!",
      "vcrLastName": "@%52",
      "vcrLoginName": "!E@DFWFG#^^^#TGE&^$",
      "vcrPassword": "test#123",
      "vcrStatus": "InActive",
      "vcrIsClient": "eClerx",
      "vcrEmail": "saasdasdmple.user@test.com",
      "vcrRole": "Analyst",
      "Agreements_Selected": "ISDA"
    }
  ]
}

下面是我的HTML代码，用于呈现从服务中获取的数据。

 <table cellpadding="0" width="100%" cellspacing="0" border="0" class="search_grid_view table-striped">
    <thead>
        <tr>
             <th style="min-width: 100px;">Login Name</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Role</th>
            <!-- <th>Agreement Type</th>
            <th>Status</th>
            <th>User Type</th>
            <th>Email</th>
            <th>Action</th> -->


            <!-- <th *ngFor="let col of getColumns">
                {{col}}
            </th> -->
        </tr>
    </thead>
    <tbody>

        <tr *ngFor="let char of arrBirds">

             <td >
                    {{char.vcrFirstName}}
                  </td>
                  <td >
                  {{char.vcrLastName}}
                  </td>
                  <td >
                  {{char.vcrLoginName}}
                  </td>   
                  <td >
                  {{char.vcrPassword}}
                   </td> 




        </tr>

    </tbody>
</table>

以下是我得到的错误。

    ERROR Error: Error trying to diff '{
  "Table": [
    {
      "intUserId": 1109,
      "vcrFirstName": "sdvlbs",
      "vcrLastName": "dsbvsdfn",
      "vcrLoginName": "!@#DBASDI?\"|}",
      "vcrPassword": "eclerx#123",
      "vcrStatus": "InActive",
      "vcrIsClient": "eClerx",
      "vcrEmail": "sdvlbs.dsbvsdfn@eClerx.com",
      "vcrRole": "Analyst,Auditor,Team Lead,Manager",
      "Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
    },
    {
      "intUserId": 1121,
      "vcrFirstName": "(*&&)!",
      "vcrLastName": "@%52",
      "vcrLoginName": "!E@DFWFG#^^^#TGE&^$",
      "vcrPassword": "eclerx#123",
      "vcrStatus": "InActive",
      "vcrIsClient": "eClerx",
      "vcrEmail": "saasdasdmple.user@eclerx.com",
      "vcrRole": "Analyst",
      "Agreements_Selected": "ISDA"
    }
  ]
}'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.DefaultIterableDiffer.diff (core.js:5528)
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3134)
    at checkAndUpdateDirectiveInline (core.js:9038)
    at checkAndUpdateNodeInline (core.js:10299)
    at checkAndUpdateNode (core.js:10261)
    at debugCheckAndUpdateNode (core.js:10894)
    at debugCheckDirectivesFn (core.js:10854)
    at Object.eval [as updateDirectives] (UsergridComponent.html:42)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:10846)
    at checkAndUpdateView (core.js:10243)

有人可以帮助我如何显示网格中的数据吗？

两天以来我一直在挣扎。