Question

我有来自调用Web API的json数据。代码如下

export class App {

constructor() {

    this.empRecords = null;
    this.fetchEmployees();
}

fetchEmployees() {
    httpClient.fetch('http://localhost:61517/odata/emps')
        .then(response => response.json())
        .then(data => {
            this.empRecords = data;
        });
}

}

当我在html表中绑定这个json数据时。 html代码如下：

 <table border="1">
    <thead>
        <tr>
            <td><b>First Name</b></td>
            <td><b>Last Name</b></td>
            <td><b>Age</b></td>
            <td><b>Gender</b></td>
            <td><b>Department</b></td>
        </tr>
    </thead>
    <tbody>
        <tr repeat.for="emp of empRecords">

            <td>${emp.fname}</td>
            <td>${emp.lname}</td>
            <td>${emp.age}</td>
            <td>${emp.gender}</td>
            <td>${emp.department}</td>
        </tr>
    </tbody>
</table>

无法绑定html表中的数据。它显示以下错误：

未捕捉错误：＆＃39; empRecords＆＃39;是不可重复的

如何在aurelia js中绑定html表中的数据。

Answer 1

问题是在响应到来之前，数组为空，正如错误所说，这是不可重复的。您可以使用repeat.for保护if元素，也可以将empRecords属性设置为空数组而不是null。你甚至可以同时使用它们。

方法1：

<tbody if.bind="empRecords && empRecords.length">
  <tr repeat.for="emp of empRecords">
    <td>${emp.fname}</td>
    <td>${emp.lname}</td>
    <td>${emp.age}</td>
    <td>${emp.gender}</td>
    <td>${emp.department}</td>
  </tr>
</tbody>
<tbody if.bind="!empRecords || !empRecords.length">
  <tr>
    <td colspan="5">No data</td>
  </tr>
</tbody>

方法2：

export class App {

  constructor() {
    this.empRecords = [];
    this.fetchEmployees();
  }
}

通过将empRecords设置为[]而不是null，它会变得可重复，只是它会为空。

此外，根据您的反馈，您的响应结构包含嵌入属性中的值。像这样修改fetchData方法：

fetchEmployees() {
  var self = this;

  httpClient.fetch('http://localhost:61517/odata/emps')
    .then(response => response.json())
    .then(data => {
      self.empRecords = data.value;
    });
}

Answer 2

您的JSON不是数组，但包含一个value，其中包含您要绑定的数组。这样的事情可以解决问题：

httpClient.fetch('http://localhost:61517/odata/emps')
    .then(response => response.json())
    .then(data => {
        this.empRecords = data.value;
    });

编辑：根据其他答案的建议，您还应该通过设置

初始化您的empRecords

this.empRecords = []

在构造函数中。

httpsquest返回的JSON：

{
  "odata.metadata":"localhost:61517/odata/$metadata#emps",
  "va‌lue": [
    {
      "id":1004,
      "fn‌ame":"jai",
      "lname":"‌pundir",
      "age":23,
      "ge‌nder":"Male",
      "depart‌ment":"IT"
    },
    {
      "id":10‌05,
      "fname":"ram",
      "ln‌ame":"singh",
      "age":2‌4,
      "gender":"male",
      "d‌epartment":"HR"
    }
  ]
}

Answer 3

在

中调用它时，

this未引用class App()

.then(data => {
    this.empRecords = data;
});

我不确定但是尝试使用：

export class App {

    constructor() {
        this.empRecords = null;
        this.fetchEmployees();
    }

    fetchEmployees() {
        var self = this;

        httpClient.fetch('http://localhost:61517/odata/emps')
            .then(response => response.json())
            .then(data => {
                self.empRecords = data;
            });
    }

如何在Aurelia JS中绑定来自Web API的数据？

3 个答案: