javascript - 数据网格不能在 Angular 中与 asp.net 核心版本 2.2 一起工作

Question

我在基于 asp.net 核心和角度的项目中使用 Devextreme 的 Datagrid 小部件。

JSON响应如下。

{
    "result": {
        "items": [
            {
                "firstName": "Asu",
                "lastName": "Voh",
                "emailId": "[e-mail]",
                "dateOfBirth": "2020-12-12T00:00:00",
                "isdiabetes": "No",
                "gender": "Female",
                "isadmittedbefore": false,
                "isDeleted": false,
                "deleterUserId": null,
                "deletionTime": null,
                "lastModificationTime": null,
                "lastModifierUserId": null,
                "creationTime": "2020-12-12T00:00:00",
                "creatorUserId": null,
                "id": 4
            }
        ]
    },
    "targetUrl": null,
    "success": true,
    "error": null,
    "unAuthorizedRequest": false,
    "__abp": true
}

下面是我正在使用的角度代码，下面是 html 文件代码。

患者.component.html ：

<div [class]="containerClass">
            <div class="card card-custom">
                <div class="card-body">
                    <dx-data-grid
                        id="patientgrid"
                        [dataSource]="dataSource"
                        [repaintChangesOnly]="true"
                        [showBorders]="true">

                        <dxo-scrolling mode="virtual"></dxo-scrolling>

                        <dxi-column dataField="firstName" caption="{{'FirstName' | localize}}"></dxi-column>
                        <dxi-column dataField="lastName" caption="{{'LastName' | localize}}"></dxi-column>
                        <dxi-column dataField="emailId" caption="{{'EmailId' | localize}}"></dxi-column>
                        <dxi-column dataField="dateOfBirth" caption="{{'DateOfBirth' | localize}}"></dxi-column>
                        <dxi-column dataField="isdiabetes" caption="{{'Isdiabetes' | localize}}"></dxi-column>
                        <dxi-column dataField="gender" caption="{{'Gender' | localize}}"></dxi-column>
                        <dxi-column dataField="isadmittedbefore" caption="{{'Isadmittedbefore' | localize}}"></dxi-column>
                    </dx-data-grid>
                </div>
            </div>
        </div>

下面是ts文件代码。

病人组件.ts

export class PatientsComponent extends AppComponentBase {

    dataSource: any = {};
    refreshMode : string;

  constructor(
      injector : Injector,
      private _patientService: PatientServiceProxy
    ) {
      super(injector);
      this.getData();
  }

  getData(){
      this.refreshMode = "full";

      /*this._patientService.getPatient("").subscribe(
          result => {
              console.log(result);
          });*/

      //http://localhost:22742/api/services/app/Patient/GetPatient

        this.dataSource = new CustomStore({
            key: "id",
            load: (loadOptions) => {
                return this._patientService.getPatient("").toPromise()
               }
           });
  }

  ngOnInit() {
  }

我搜索了这个错误并找到了更新 startup.cs 文件的解决方案，所以我喜欢下面..但仍然会出现错误。

我还更新了我的启动文件，如下所示。

services.AddMvc()
                .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());

所以知道这里有什么问题。

谢谢

标签： javascriptangularasp.net-coredevextremedevextreme-angular

Answer 1

通过在以下部分进行更改，我解决了这个问题。

this.dataSource = new CustomStore({
            key: "id",
            load: (loadOptions) => {
                data => response.data
               }
           });