Question

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

分析程序错误：意外的标记[，[let [key，item]中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() { }
}

Answer 1

在我的标记中加入了这个;不变。

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

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

我几年前发现this feature request要求在* 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>

* ngFor循环中的结构化赋值

3 个答案: