Как получить мат выбрать выбранное значение в подсказке, используя угловой материал - PullRequest
0 голосов
/ 06 июня 2018

Я показываю выпадающий список, используя угловой выбор материала мат.Я хочу отобразить выбранный элемент с помощью всплывающей подсказки материала.

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

Пожалуйста, помогите

Ответы [ 4 ]

0 голосов
/ 24 января 2019

, чтобы отобразить всплывающую подсказку на основе выбранного значения, вы должны определить идентификатор для элемента mat-select, а затем обратиться к его «выбранному» свойству

<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>
0 голосов
/ 06 июня 2018

Вы пропустили {{}} закрыть фигурные скобки.

Я создал демо на 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";
    }
  }
0 голосов
/ 09 ноября 2018

оригинальный код

<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>
0 голосов
/ 06 июня 2018

Я думаю, что вы пропустили } в этом matTooltip="{{selected}

...