typescript - Angular mat-tooltip som anropar en funktion

Jag vill kalla på en metod selections() från knappens tooltip som gör något och returnerar en sträng som behöver visas när man hovrar över tooltipen. Jag försökte interpolera det returnerade värdet i HTML, men det fungerade inte

app.component.html

<button mat-raised-button
      matTooltip={{selections()}}
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

Strängen "selected" måste returneras från funktionen och visas när man hovrar över verktygstipset

app.component.ts

selections() {
this.selectedelems = [];
this.selection.selected.map(id => this.tableData.data.filter((row: any) => 
{
  if (row._id === id) {
    this.selectedelems.push(row.name);
    this.selected = this.selectedelems.join('\r\n');
    }
}));
return this.selected;
}

Svar #1

Du behöver använda ett malluttryck via egenskapsbindning.. följande bör kalla på din metod och ta emot den returnerade strängen.

<button mat-raised-button
      [matTooltip]="selections()"
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

Följande länk innehåller information om templatuttryck

https://angular.io/guide/template-syntax#template-expressions

Följande länk innehåller information om egenskapsbindning

https://angular.io/guide/template-syntax#property-binding

Vänligen notera:

Även om detta också är en genomförbar lösning för att fylla i verktygstipset via komponentmetoden, var detta enligt kommentarerna nedan inte den grundläggande orsaken till denna fråga och interpolation skulle ha fungerat i detta scenario också. matTooltip="{{selections()}}"

Relaterade artiklar