如何使用角材料在工具提示中获取垫选择选定值

Question

我正在使用角材料垫选择显示下拉列表。我想使用材料工具提示显示所选元素。

<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>

但它显示 [object object]

这是emp的内容

emp[
{"id":0101,"name":"damshad"},
{"id":0102,"name":"ranjan"},
{"id":0103,"name":"himanshu"},
{"id":0104,"name":"gourge"},
{"id":0105,"name":"taffic"},
{"id":0106,"name":"ajir"},
{"id":0107,"name":"mallom"}
]

请帮忙

Answer 1

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

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

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

Answer 2

你错过了{{}}大括号。

我在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>

代码

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 3

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

  <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>