文章/答案/技术大牛

发布

社区首页 >问答首页 >角度:动态更新mat-菜单项不更新视图。

问角度:动态更新mat-菜单项不更新视图。
EN

Stack Overflow用户

提问于 2020-03-19 14:12:13

回答 1查看 1.7K关注 0票数 0

我有一个材料菜单(垫菜单)触发的历史图标按钮，应该包含一个运行列表的帐户，用户已经搜索。

在课堂上：

searchHistoryList: Array<string>; // populated dynamically while the app is in use

在观点中：

<button mat-icon-button [matMenuTriggerFor]="accountHistoryList">
    <mat-icon>history</mat-icon>
</button>

<mat-menu #accountHistoryList="matMenu">
    <button mat-menu-item *ngFor="let acc of searchHistoryList">
      <button mat-menu-item (click)="loadCustomer(acc)">{{acc}}</button>
    </button>
</mat-menu>

问题是，这个名单的垫菜单项目似乎只呈现一次。通过实验，我发现如果我用一些硬编码的值初始化绑定到这个模板的searchHistoryList数组，它们就会出现在菜单项列表中。但是，如果我在运行时以编程方式向searchHistoryList数组添加值，则不会显示这些值。

我做错什么了？

angular

angular-material

angular2-template

menuitem

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-19 14:31:17

您需要使用trackByFn来告诉角您的集合已经更改，并且需要重新呈现。

<mat-menu #accountHistoryList="matMenu">
    <button mat-menu-item *ngFor="let acc of searchHistoryList;trackBy=trackByMethod">
      <button mat-menu-item (click)="loadCustomer(acc)">{{acc}}</button>
    </button>
</mat-menu>

功能定义：

trackByMethod(index:number, el:any): number {
    return el.id;
  }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60758942

复制

相似问题

问角度:动态更新mat-菜单项不更新视图。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度:动态更新mat-菜单项不更新视图。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度:动态更新mat-菜单项不更新视图。
EN