如何使用 angular material 在工具提示中获取 mat select selected 值

Question

我正在使用 angular material 垫 select 显示下拉菜单。我想使用 material 工具提示显示 selected 元素。

<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

我想你在这个 matTooltip="{{selected}

中错过了 }

Answer 2

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

我已经在 stackblitz

上创建了演示

Html code

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

ts code

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

原码

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

要根据 selected 值显示工具提示，您必须为 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 5

您可以简单地将 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>

Answer 6

如果您只是想获得工具提示中显示在 mat-select“触发器”上的内容，请使用 triggerValue:

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

适用于 ngModel、反应形式和多个 selection

如何使用 angular material 在工具提示中获取 mat select selected 值

How to get mat select selected value in tool tip using angular material

tooltip

angular-material

angular

angular5