*ngFor - 无法动态呈现项目 - Angular 6 - Mat-menu 按钮
*ngFor - not able to render items dynamically - Angular 6 - Mat-menu button
到目前为止,
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 示例似乎很难生成动态元素。还是我的方法真的不可能?
请不要无故投反对票。我遇到过几个例子,这些例子现在都没有用
谢谢
你能试试这个并让我知道结果吗?
<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>
感觉最差。我刚刚犯了一个愚蠢的错误,
在函数内部声明了一个变量,所以'let abc'的作用域在函数之外是不存在的。
声明的变量不是数组
我只是改正了上面的错误。现在按预期工作
在 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>
到目前为止,
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 示例似乎很难生成动态元素。还是我的方法真的不可能?
请不要无故投反对票。我遇到过几个例子,这些例子现在都没有用 谢谢
你能试试这个并让我知道结果吗?
<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>
感觉最差。我刚刚犯了一个愚蠢的错误,
在函数内部声明了一个变量,所以'let abc'的作用域在函数之外是不存在的。
声明的变量不是数组
我只是改正了上面的错误。现在按预期工作
在 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>