垫工具提示在材料列表中不起作用-项目
垫工具提示在材料列表中不起作用-项目
提问于 2022-05-24 10:12:28
我的垫子工具提示没有显示在我的垫子列表项目里面。我做了以下工作：
- 添加了MatTooltipModule &
- ，创建了一个类，将工具提示放在其他元素的前面。
这是代码：
<mat-accordion mat-list-option>
<mat-expansion-panel [togglePosition]="'before'">
<mat-expansion-panel-header>
<mat-icon [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
<mat-panel-title>Channel members</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list>
<mat-list-item *ngFor="let users of currentUsers" mat-menu-item>
<mat-icon
class="items-begin relative"
[svgIcon]="'heroicons_outline:user'"
><span
class="absolute left-5 bottom-4 h-2 w-2 rounded-full"
matTooltip="Show something!"
matTooltipPosition="left"
[ngClass]="{
'bg-green-500': users.data.status === 'active',
'bg-amber-500': users.data.status === 'pending',
'bg-red-500': users.data.status === 'rejected'
}"
></span
></mat-icon>
{{ users.data.displayName }}
</mat-list-item>
</mat-nav-list>
</mat-expansion-panel>
</mat-accordion>有人知道如何解决这个问题吗？
回答 1
Stack Overflow用户
发布于 2022-11-02 19:36:20
欢迎来到堆栈溢出！
我想我至少能让你更接近解决方案。我相信你的问题只是标签和属性不匹配。我把matMenuItem改成了matListItem，把mat-nav-list改成了mat-list。我也拿出了很多，以获得一个最低限度的可重复的例子，但我希望这至少能让你达到你需要的地方完成它！
我这里为您提供了模板和组件文件，但我也鼓励您查看我用来获得此解决方案的stackblitz。我鼓励你分叉它，使它成为你需要它的具体例子。
import { Component } from '@angular/core';
import { TooltipPosition } from '@angular/material';
import { FormControl } from '@angular/forms';
@Component({
selector: 'basictooltip',
templateUrl: 'basictooltip.html',
})
export class BasicTooltip {
public currentUsers = [
{
data: {
status: 'active',
displayName: 'Ricky Bobby',
},
},
{
data: {
status: 'active',
displayName: 'Ricky Bobby',
},
},
{
data: {
status: 'active',
displayName: 'Ricky Bobby',
},
},
{
data: {
status: 'active',
displayName: 'Ricky Bobby',
},
},
];
}<mat-accordion mat-list-option>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-icon></mat-icon>
<mat-panel-title>Channel members</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item
*ngFor="let users of currentUsers"
matListItem
class="absolute left-5 bottom-4 h-2 w-2 rounded-full"
matTooltip="Show something!"
matTooltipPosition="above"
>
{{ users.data.displayName }}
</mat-list-item>
</mat-list>
</mat-expansion-panel>
</mat-accordion>正如所承诺的，下面是stackblitz来处理这个问题，并使它成为您需要https://angular-tooltip-material-6synxp.stackblitz.io的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72361085
复制相关文章
相似问题
腾讯云开发者
