Question

到目前为止，

  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示例似乎很难生成动态元素。还是用我的方法真的不可能？

pls，请勿无故拒绝投票。我碰到过一些例子，到目前为止这些例子仍无济于事 谢谢

Answer 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>

Answer 2

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

在函数内部声明变量，因此'let abc'的作用域不在函数之外。
var不是数组

我只是纠正以上错误。现在可以正常工作

Answer 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>

* ngFor-无法动态渲染项目-Angular 6-Mat-menu按钮

3 个答案: