如何使用角度材料在工具提示中选择选定的值

Answer 1

您错过了

{{}}

关闭大括号。

我已经在 stackblitz

上创建了演示

HTML代码

 <mat-select [(ngModel)]="selected" matTooltip="{{getToolTipDEata(selected)}}"  multiple>
    <mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>

ts代码

selected=null;
  emp=[{
    name:'emp 1'
  },{
    name:'emp 2'
  }]

  getToolTipDEata(data){
    if(data && data.length){
      let msg="";
      data.forEach(res=>{
        msg+=res.name + " ";
      })
      return msg;
    }else{
      return "please select employee";
    }
  }

Answer 2

如果您只想获取工具提示中的垫子选择“触发器”上显示的内容，请使用

triggerValue

:

<mat-select #matSelect [matTooltip]="matSelect.triggerValue">
</mat-select>

适用于 ngModel、反应式表单和多项选择

Answer 3

您可以简单地将 ngModel 传递给 Tooltip，也可以使用 matTooltipPosition 更改位置。

  <mat-select 
    [(ngModel)]="emp" 
    matTooltip="{{emp}}"
    matTooltipPosition="above|below|left|right"
    >
    <mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
  </mat-select>

Answer 4

原代码

<mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}} 
(openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple>
<mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
</mat-form-field>

我的代码

<mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{toppings.value.name}} 
(openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple>
<mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
</mat-form-field>

Answer 5

要根据所选值显示工具提示，您必须为 mat-select 元素定义 id，然后您可以引用其“selected”属性

<mat-select #testid [matTooltip]="testid .selected?.viewValue"
            (openedChange)="oChange($event)" placeholder="Employee" 
            [formControl]="toppings" multiple>
                <mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>

Answer 6

我想你错过了

}

matTooltip="{{selected}