aurelia - 如何在 Aurelia JS 中绑定(bind)来自 Web API 的数据？

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 表中绑定(bind)此 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>

无法绑定(bind)html表格中的数据。它显示以下错误:

Uncaught Error :“empRecords”的值不可重复

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

Answer 1

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

方法一:

<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>

方法二:

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;
    });
}