Javascript *ngFor-无法动态渲染项目-角度6-Mat菜单按钮
到目前为止,我有Javascript *ngFor-无法动态渲染项目-角度6-Mat菜单按钮,javascript,angular,typescript,ngfor,Javascript,Angular,Typescript,Ngfor,到目前为止,我有 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 v
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>
this.ItemList=[{
“项目1”:“价值-1”。
“项目2”:“价值2”。
“项目3”:“价值-3”。
“项目4”:“价值4”。
}];
价值清单
项目1
/*项目2
项目2*/
我在控制台中没有看到任何错误。但同时,值没有被渲染,相反,它只是显示硬编码的值
有人能告诉我如何做到这一点吗?现有的stackblitz示例似乎使生成动态元素变得复杂。还是我的方法真的不可能
请不要无故否决投票。我遇到了几个例子,这些例子到目前为止都没有帮助
谢谢你能试试这个并告诉我结果吗
<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}}
/*{{list}}
{{list}}*/
感觉最糟糕。我只是犯了个愚蠢的错误
我只是纠正上面的错误。现在按预期工作在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>
菜单
{{ItemList[0][key]}
在ItemList中,您有
而不是,
奇怪的是,如果您的typescript代码中有语法错误,您的ItemList只包含一个对象,那么控制台中不会出现任何错误。您可能需要迭代该对象的键值。lols。。我自己键入只是为了在这里显示示例数据。list
也是一个对象,您需要在按钮体中插入一个字符串。我不确定OP的ItemList
结构背后的想法是什么,但它可能应该是{{list.item1}{{list.item1}}只显示一个值,要遍历所有值,就要使用{list}。@sid
需要它里面有一个字符串,而不是你给它的对象。请注意,ItemList是一个对象列表,因此list将是一个不可编辑的对象。我的意思是OP可能希望在每次迭代中创建多个按钮,比如{{{list.item1}{{{list.item2}}…
。这也是另一种方法。伟大的