Angular *ngFor循环中的非结构化分配

尝试使用

*ngFor

对

对象循环浏览标记中的JS字典。条目

并获取错误消息：

分析器错误：对象的[let[key，item]的第5列出现意外的标记[、预期的标识符、关键字或字符串。条目（items）]

模板：

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

{{item.displayName}}

打字稿：

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() { }
}

导出接口下拉项{
displayName:string，
价值：任何，
选中：布尔值
}
@组件（{/*…*/}）
导出类MyComponent{
@Input（）项：{[key:string]：DropdownItem}；
@Output（）itemClicked=neweventemitter（）；
对象=对象；
构造函数（）{}
}

在我的标记中结束；ts未更改

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

{{items[key].displayName}

我仍然希望能够在标记中对Object.entries（）进行分解，但看起来*ngFor当前没有进行分解的选项

---

从几年前我发现在语法中要求破坏，他们说他们会传递这个特性……但我真的希望他们重新打开它。

另一个解决办法是使用角的：

{{entry.value.displayName}

---

虽然条目仍然没有被解构，但这与原始条目有点接近。

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

{{item.displayName}}

Angular template parser不太合适，您在

DropDownItem

中的字段命名会使双

值的访问有点难看，但这取决于命名选择，而不是问题本身固有的。
<button *ngFor="let entry of items | keyvalue" 
        (click)="itemClicked.emit([entry.key, entry.value.value])">
  {{ entry.value.displayName }}
</button>

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