*ngFor 循环中的解构赋值答案

【问题标题】：Destructured Assignments in a *ngFor loop*ngFor 循环中的解构赋值
【发布时间】：2018-06-05 11:33:42
【问题描述】：

尝试使用*ngFor 对Object.entries 在我的标记中循环浏览JS 字典并收到错误消息：

解析器错误：[let [key, item] of Object.entries(items)] 中的第 5 列出现意外的标记 [、预期的标识符、关键字或字符串]

模板：

<button *ngFor="let [key, item] of Object.entries(items)" 
        (click)="itemClicked.emit([key, item.value])">
  {{ item.displayName }}
</button>

打字稿：

export interface DropDownItem {
  displayName: string,
  value: any,
  checked: boolean
}

@Component({ /* ... */ })
export class MyComponent {
  @Input() items: { [key: string]: DropdownItem };

  @Output() itemClicked = new EventEmitter<[string, any]>();

  Object = Object;

  constructor() { }
}

【问题讨论】：

Angular 模板解析器不是

标签： angular typescript

【解决方案1】：

在我的标记中结束了这个； ts 不变。

<button *ngFor="let key of Object.keys(items)"
        (click)="itemClicked.emit([key, items[key].value])">
  {{ items[key].displayName }}
</button>

仍然希望我可以在我的标记中解构 Object.entries()，但看起来解构目前不是 *ngFor 的选项。

几年前我发现this feature request 要求使用 *ngFor 语法进行解构，他们说他们会传递这个功能....但我真的希望他们考虑重新打开它。

【讨论】：

【解决方案2】：

另一种解决方案是使用 Angular 的KeyValuePipe：

<button *ngFor="let entry of items | keyvalue" 
        (click)="itemClicked.emit([entry.key, entry.value.value])">
  {{ entry.value.displayName }}
</button>

虽然条目仍未解构，但它与您的原始版本有点接近。

【讨论】：

不幸的是，您在 DropDownItem 中的字段命名使双重 value 访问有点难看，但这取决于命名选择，而不是问题本身所固有的。

【解决方案3】：

从技术上讲，您根本不需要解构即可使用键值对（尽管这在样式方面不是很好）：

<button *ngFor="let entry of Object.entries(items)" 
        (click)="itemClicked.emit([entry[0], entry[1].value])">
  {{ item.displayName }}
</button>

【讨论】：