*ngFor 循环中的解构赋值

Question

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

解析器错误：在 Object.entries(items) 的 [let [key, item] 中的第 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() { }
}

Answer 1

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

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

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

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

Answer 2

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

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

这有点接近您的原始条目，尽管条目仍未解构。

Answer 3

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

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