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>

但它显示[对象对象]

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

您可以简单地将ngModel传递给工具提示，也可以使用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 2

你错过了<mat-select [(ngModel)]="selected" matTooltip="{{getToolTipDEata(selected)}}" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select>大括号。

我在stackblitz

上创建了演示

Html代码

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";
    }
  }

ts代码

find

Answer 3

我认为您错过}

中的matTooltip="{{selected}

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

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

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

适用于 ngModel、反应形式和多选

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

6 个答案: