Angular：绑定不适用于索引数组答案

【问题标题】：Angular: binding not working with Indexed ArrayAngular：绑定不适用于索引数组
【发布时间】：2019-08-20 17:06:58
【问题描述】：

我选择使用这种数据结构：

let disponibilities = [
  "2019-7-15" : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
]

但是在模板绑定中不起作用，它表现为一个空数组，我用这段代码对其进行了测试：

{{disponibilites.length}} // result: 0
{{disponibilites | json}} // result: []
// ngFor not showing any data.

我在问为什么这种行为以及在这种情况下我必须适应什么数据结构（对象的索引数组）？

【问题讨论】：

[ {"2019-7-15" : {id: 1}}, {"2019-7-16" : {id: 2}}, {"2019-7-20" : {id: 3}} ] 有效，但您现在的数据无效。

标签： javascript angular typescript angular8

【解决方案1】：

由于您的数组是一个 assoc 数组，您可以使用 Object.keys 来绑定您的数组。例如：

// typescript file. define a property for Object.keys
objectKeys = Object.keys;

// html file, use objectKeys for binding
<ng-container ngFor="let key of objectKeys(arrayName)">
   <tr>
      <td>{{ arrayName[key].propertyName1 }}</td>
      <td>{{ arrayName[key].propertyName2 }}</td>
      ...
   </tr>
</ng-container>

这有帮助吗？

【讨论】：

【解决方案2】：

打字错误，将disponibilites.length改为disponibilities.length。
let disponibilities = ["2019-7-15" : {id: 1, ...},...] 是错误的数据结构（不是array 也不是object）。采用： let disponibilities = {"2019-7-15" : {id: 1, ...},...}
使用Object.keys(disponibilites).length 而不是disponibilites.length

【讨论】：

【解决方案3】：

我认为您正在寻找的是：

disponibilities = {
  "2019-7-15" : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
}

使用 ES6 ComputedPropertyName，您还可以使用变量设置日期键：

let date1 = "2019-7-15";
disponibilities = {
  [date1] : {id: 1, ...},
  "2019-7-16" : {id: 2, ...},
  "2019-7-20" : {id: 3, ...}
}

在没有let或this的构造函数之前声明你的数组，如果在构造函数中，Angular可以正确绑定它。

如果你需要循环遍历它，你需要在模板中使Object.keys可用：

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(disponibilities)">{{key + ' : ' + disponibilities[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;

  disponibilities = {
    "2019-7-15" : {id: 1, ...},
    "2019-7-16" : {id: 2, ...},
    "2019-7-20" : {id: 3, ...}
  }

  constructor(){}
}

【讨论】：

【解决方案4】：

实际上，这不是一个好的数据结构，因为即使它是 JavaScript 中的有效结构，您也不能轻松地通过键访问对象。您可以尝试以下方法：

let disponibilities = [
  { date: "2019-7-15", id: 1, ...},
  { date: "2019-7-16", id: 2, ...},
  { date: "2019-7-20", id: 3, ...},
]

【讨论】：