Question

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

下面是我得到的我的API响应

[
 {
   "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"
 }
]

但是在通过网格将数据传递到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天以来，我一直在挣扎。

Answer 1

我认为html文件与http响应不同步

 <tr *ngFor="let char of arrBirds">
                 <td > {{char?.vcrPassword}}</td>
                 <td > {{char?.vcrStatus}} </td>
                 <td > {{char?.Agreements_Selected}}</td>   
                 <td > {{char?.vcrEmail}} </td> 
    </tr>

在tr中更改此设置即可。

如果仍然无法使用，请从角度/核心导入ChangeDetectorRef

将其注入构造函数中，并在ChangeDetectorRef中使用detectchanges方法

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

    constructor(private ref: ChangeDetectorRef) {}

    userdata(){
    this.http.get(this.url).subscribe((res)=>{

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

    });
    }

希望有帮助。

Answer 2

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

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

}

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

2 个答案: