*ngFor - 无法动态呈现项目 - Angular 6 - Mat-menu 按钮答案

【问题标题】：*ngFor - not able to render items dynamically - Angular 6 - Mat-menu button*ngFor - 无法动态呈现项目 - Angular 6 - Mat-menu 按钮
【发布时间】：2019-04-25 09:25:01
【问题描述】：

到目前为止，

  this.ItemList = [{
    "item1":"value-1".
    "item2":"value-2".
    "item3":"value-3".
    "item4":"value-4".
    }];

<button mat-button mat-raised-button color="warn" [matMenuTriggerFor]="menu" (click)='dummyBtn($event)'>List of values</button>
  <mat-menu #menu="matMenu" *ngFor = "let list of ItemList">
    <button mat-menu-item>Item 1</button>
    /*<button mat-menu-item>Item 2</button>
    <button mat-menu-item>Item 2</button>*/
  </mat-menu>

我在控制台中没有看到任何错误。但同时值没有被渲染，相反，它只是显示硬编码的值。

有人能告诉我如何做到这一点吗？现有的 stackblitz 示例似乎使生成动态元素变得复杂。或者我的方法真的不可能吗？

请不要无缘无故投反对票。我遇到了几个例子，到目前为止这些都没有帮助 谢谢

【问题讨论】：

在 ItemList 中你有 . 而不是 ,
奇怪的是你在控制台中没有收到任何错误，因为你在打字稿代码中有语法错误
您的 ItemList 仅包含一个对象。您可能需要迭代该对象的键值。
大声笑.. 我只是自己输入只是为了在此处显示示例数据。

标签： javascript angular typescript ngfor

【解决方案1】：

你能试试这个并告诉我结果吗？

<mat-menu #menu="matMenu" *ngFor = "let list of ItemList">
<button mat-menu-item>{{list}}</button>
/*<button mat-menu-item>{{list}}</button>
<button mat-menu-item>{{list}}</button>*/
</mat-menu>

【讨论】：

list 也是一个对象，并且您希望在按钮主体内有一个字符串。我不确定 OP 的 ItemList 结构背后的想法是什么，但它可能应该是 {{list.item1}}
{{list.item1}} 将只显示单个值，要遍历所有值，将使用 {{list}}。
@sid <button> 期望它里面有一个字符串，而不是你给它的对象。请注意，ItemList 是一个对象列表，因此 list 将是一个不可迭代的对象。我的意思是 OP 可能希望在每次迭代中创建多个按钮，例如 <button>{{list.item1}}</button> <button>{{list.item2}}</button>...。

【解决方案2】：

感觉最糟糕。我只是犯了一个愚蠢的错误，

在函数内部声明一个变量，因此“let abc”的范围在函数之外是不存在的。
声明的var不是数组

我只是纠正了上面的错误。现在按预期工作

【讨论】：

【解决方案3】：

在ts文件和html中声明objectKeys = Object.keys，

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item *ngFor="let key of objectKeys(ItemList[0])">
    {{ ItemList[0][key] }}
  </button>
</mat-menu>

【讨论】：

这也是另一种方式。太好了！