角度材质动态菜单内容不显示
角度材质动态菜单内容不显示
提问于 2021-07-28 23:22:01
我是angular的新手，正在努力使一个组件到位，其中包括一个文本输入字段，一旦输入超过3个字符，就会发出服务调用，在数据库中搜索数据，并返回弹出菜单中使用的项目数组以供选择。
我已经准备好了服务并适当地返回，菜单项在我想要的时候弹出，在我想要的时候消失，但是我不能让菜单显示任何内容。它总是以空盒子的形式出现。我能够让mat-menu在我的应用程序中的其他地方作为上下文菜单工作，这看起来很好，所以我不确定我在这一点上遗漏了什么。有人知道出什么问题了吗？
模板代码：
<div>
<mat-menu #searchResultMenu="matMenu" yPosition="above" *ngIf="searchResults.length > 0">
<ng-template matMenuContent let-searchResults="searchResults">
<button mat-menu-item *ngFor="let sritem of searchResults" (click)="findAndSelect(sritem)">
{{sritem.displayName}}
</button>
</ng-template>
</mat-menu>
<!-- div below is really just there so I can open/close the menu
in typescript code rather than with a visual UI component action.
-->
<div #menuTrigger [matMenuTriggerFor]="searchResultMenu" [matMenuTriggerData]="searchResults"></div>
<mat-form-field>
<mat-label>Search String</mat-label>
<input matInput type="text" [value]="searchString" (input)="searchStringChanged($event)">
<button *ngIf="searchString" matSuffix mat-icon-button aria-label="Clear" (click)="searchString=''">
<mat-icon>clear</mat-icon>
</button>
</mat-form-field>
</div>typeScript代码：
@ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
public searchResults: SearchResultItem[];
* * *
searchStringChanged(ev:Event) {
this.searchString = <string>((<any>ev.target)?.value);
if (this.searchString?.length > 3) {
this.myservice.getSearchResults(this.searchString).subscribe(data => {
<!-- prove to myself I'm getting a result set: -->
console.log("search returned results: ", data);
if (data.length > 0) {
this.searchResults = data;
this.menuTrigger.menuData = this.searchResults;
this.menuTrigger.openMenu();
}
});
}
}
clearSearchString() {
this.searchString = "";
this.searchResults = [];
this.menuTrigger.closeMenu();
}
findAndSelect(sritem: SearchResultItem) {
console.log("Searching for item named: ", sritem.displayName);
this.menuTrigger.closeMenu();
}
* * *searchResult是从我的服务返回的SearchResultItem对象的数组，我验证了它在菜单出现时是填充的，并且每个对象都包含一个名为“displayName”的字符串参数。
提前谢谢。
其他信息：
我在UI中看到的：UI screenshot
我在调试控制台中看到的从我的服务返回的内容：debug console screenshot
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-29 02:01:20
去掉let-searchResults="searchResults“，它就可以工作了
Stack Overflow用户
发布于 2021-07-29 03:18:00
虽然上面回答了我最初的问题，但我还有其他一些运行时错误，即使UI运行良好，也会弹出错误。我最终找到了他们，并清理了我的原始帖子，如下所示。我只是想我应该添加这一点，以防其他人试图复制我最初在下面posted...use的代码。基本上，我从mat-menu标记中删除了ngIf，并在模板和typescript中相应地更新了组件，以及原始问题解决方案的更改。
非常感谢Faizal的评论/回答。
模板代码：
<div>
<mat-menu #searchResultMenu="matMenu" yPosition="above">
<ng-template matMenuContent>
<button mat-menu-item *ngFor="let sritem of searchResults" (click)="findAndSelect(sritem)">
{{sritem.displayName}}
</button>
</ng-template>
</mat-menu>
<div style="visibility: hidden; position: fixed" [matMenuTriggerFor]="searchResultMenu">
</div>
<mat-form-field>
<mat-label>Search String</mat-label>
<input matInput type="text" [value]="searchString" (input)="searchStringChanged($event)">
<button *ngIf="searchString" matSuffix mat-icon-button aria-label="Clear" (click)="searchString=''">
<mat-icon>clear</mat-icon>
</button>
</mat-form-field>
</div>打字代码：
@ViewChild(MatMenuTrigger) searchResultMenu: MatMenuTrigger = <MatMenuTrigger><unknown>null;
public searchResults: SearchResultNode[] = [];
* * *
searchStringChanged(ev:Event) {
this.searchString = <string>((<any>ev.target)?.value);
if (this.searchString?.length > 3) {
this.myservice.getSearchResults(this.searchString).subscribe(data => {
<!-- prove to myself I'm getting a result set: -->
console.log("search returned results: ", data);
if (data.length > 0) {
this.searchResults = data;
this.searchResultMenu.menuData = this.searchResults;
this.searchResultMenu.openMenu();
}
});
}
}
clearSearchString() {
this.searchString = "";
this.searchResults = [];
this.searchResultMenu.closeMenu();
}
findAndSelect(sritem: SearchResultItem) {
console.log("Searching for item named: ", sritem.displayName);
this.searchResultMenu.closeMenu();
}
* * *页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68563125
复制相关文章
相似问题
腾讯云开发者
