英文:
Why my matTooltip shows the template as [object object]?
问题
我想在鼠标悬停在元素上时显示工具提示。但它显示 [object object]
Html 代码：
<button mat-raised-button
matTooltip="关于操作的信息"
aria-label="当聚焦或悬停在按钮上时显示工具提示的按钮">
操作
</button>
<div [matTooltip]="$any(template)" style="width:200px">
<p>测试</p>
</div>
<ng-template #template>
<div>你好，世界</div>
</ng-template>
TS 代码：
import { Component } from '@angular/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'tooltip-overview-example',
templateUrl: 'tooltip-overview-example.html',
standalone: true,
imports: [MatButtonModule, MatTooltipModule],
})
export class TooltipOverviewExample {}
英文:
I want to display the tooltip when hover the element. But it shows [object object]
Html Code:
<button mat-raised-button
matTooltip="Info about the action"
aria-label="Button that displays a tooltip when focused or hovered over">
Action
</button>
<div [matTooltip]="$any(template)" style="width:200px">
<p>Test</p>
</div>
<ng-template #template>
<div>Hello World</div>
</ng-template>
TS Code:
import {Component} from '@angular/core';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule} from '@angular/material/button';
@Component({
selector: 'tooltip-overview-example',
templateUrl: 'tooltip-overview-example.html',
standalone: true,
imports: [MatButtonModule, MatTooltipModule],
})
export class TooltipOverviewExample {}
答案1
得分: 1
matTooltip不支持自定义模板，因此matTooltip必须是一个string（查看API https://material.angular.io/components/tooltip/api），不幸的是，无法使用#template使其工作。
英文:
matTooltip does not support custom templates, so matTooltip has to be string (see API https://material.angular.io/components/tooltip/api), unfortunately there is no way to make it work with #template.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论