json - 数据未以角度 4 显示在网格上

Question

我想用从 API 接收的数据填充我的网格

下面是我得到的 API 响应

[
 {
   "intUserId": 1109,
   "vcrFirstName": "sdvlbs",
   "vcrLastName": "dsbvsdfn",
   "vcrLoginName": "!@#DBASDI?\"|}",
   "vcrPassword": "eclerx#123",
   "vcrStatus": "InActive",
   "vcrIsClient": "eClerx",
   "vcrEmail": "[e-mail]",
   "vcrRole": "Analyst,Auditor,Team Lead,Manager",
   "Agreements_Selected": "ISDA,CSA,Repo,SLA,PBA"
 }
]

但是在通过网格将此数据传递给HTML时仍然是空白的

下面是我的 .ts 代码

arrBirds:Array<string> = [];
userdata(){
this.http.get(this.url).subscribe((res)=>{

this.arrBirds = Array.of(res.json()) ;
console.log(this.arrBirds)

});
}

下面是我的 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>

        </tr>
    </thead>
    <tbody>

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

             <td >
                    {{char.vcrPassword}}
                  </td>
                  <td >
                  {{char.vcrStatus}}
                  </td>
                  <td >
                  {{char.Agreements_Selected}}
                  </td>   
                  <td >
                  {{char.vcrEmail}}
                   </td> 


        </tr>

    </tbody>
</table>

我正在尝试迭代从 API 响应接收到的数据

下面是我的 API 代码

 public HttpResponseMessage GetCheckBoxes()
    {

        HttpResponseMessage response;


        UserDB userDB = new UserDB();
        DataSet ds = userDB.UserGridDetails();

        string json = JsonConvert.SerializeObject(ds.Tables[0], Formatting.Indented);

        //response = Request.CreateResponse(HttpStatusCode.OK, "[" + json + "]");
        response = Request.CreateResponse(HttpStatusCode.OK, json);

        return response;

    }

我的网格没有填充数据。自过去 5 天以来，我一直在苦苦挣扎。

标签： jsonangularapi

Answer 1

通过解析 JSON 数据，它现在正在工作。

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

}