Question

海，我正在使用primeng表，现在我需要将值绑定到html，但会遇到

错误

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我没弄错我要去哪里。

HTML：

<p-table #dt [columns]="tableHeaders" [value]="Medication">
              <ng-template pTemplate="header" let-columns>
                <tr role="row">
                  <th>data1</th>
                  <th>data2</th>
                  <th>data3</th>
                  <th>data4</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-rowData let-columns="columns">
                  <td>{{rowData.data1}}</td>
                  <td>{{rowData.data2}}</td>
                  <td>{{rowData.data3}}</td>
                  <td>{{rowData.data4}}</td>
                </tr>
              </ng-template>
            </p-table>

TS：

Medication: any[];
getEmrExportList() {
    let params = { 'Id': this.userId }
    this.emrService.getExportDetails(params)
      .subscribe(exportLists => {
        this.emrExportToCCDList = exportLists.Body.Data;
        this.Medication = this.emrExportToCCDList.Medication;
      })
  }

控制台： console.log（this.emrExportToCCDList）;

{Device: {…}, Medication: {…}, Immunize: {…}}
Device: {DeviceName: "scissore", DeviceSuppliedDate: "2018-10-09T18:30:00.000Z"}
Immunize: {VaccineCode: "DTaP, 5 pertussis antigens", Status: "entered-in-error", Date: null}
Medication: {data1: "medication1", data2: "2018-08-15T18:30:00.000Z", data3: "instruction1", data4: "Active"}
__proto__: Object

Answer 1

ngFor 仅用于遍历可迭代类型。您不能使用它来遍历{data1: "medication1", data2: "2018-08-15T18:30:00.000Z", data3: "instruction1", data4: "Active"}之类的对象。

您已使用 primeng表，该表内部在药物输入的值上使用了 ngFor 。

您的药物变量值必须如下所示：

[
  {
    data1: "medication1",
    data2: "2018-08-15T18:30:00.000Z",
    data3: "instruction1",
    data4: "Active"
  },
  {
    data1: "medication2",
    data2: "2018-08-15T18:30:00.000Z",
    data3: "instruction2",
    data4: "InActive"
  }
]

Answer 2

似乎您在绑定object时需要array。

确保this.emrExportToCCDList.Medication是此行中的对象数组。

this.Medication = this.emrExportToCCDList.Medication;

药物治疗应类似于：

this.Medication = [
    {
        data1: 'data1',
        data2: 'data2',
        data3: 'data3',
        data4: 'data4'
    },
    ...
]

如果仅从服务器接收一个对象，则可以执行以下操作：

this.Medication = [];
this.Medication.push(this.emrExportToCCDList.Medication);

因此修改后的代码为：

getEmrExportList() {
    let params = { 'Id': this.userId }
    this.emrService.getExportDetails(params)
        .subscribe(exportLists => {
            this.emrExportToCCDList = exportLists.Body.Data;
            this.Medication = [];
            this.Medication.push(this.emrExportToCCDList.Medication);
        })
}

如何将数据绑定到angular2中的primeng表

2 个答案: