如何在 Angular 的（鼠标悬停）内分配一个值？

Question

I have want show a value (which it is the return of a function in the component.ts) only when the mouse pointer is over the button.

I want to do something like this.

<div class="dropdown mat-container" style=" margin-left: 2%;">
    <button class="dropbtn" (mouseover)= "myVariable = haveRoutes(template._id)">Tipo</button>
    <div class="dropdown-content btn btn-primary">
        <a>{{myVariable}}</a>
    </div>
</div>

The function in the component.ts

haveRoutes(id){
    this._ApprovalsService.getQuantityByTemplate(id).subscribe(
      (quantity:any) => {
        if(quantity.count == 0){
          return  "Draft"
        }else{
          return "Not draft"
        }
      }
    );
  }

One solution for now, is store the value in the model and change it in the component.ts like this:

export class GetComponent implements OnInit {
     message = "";
     
     //some other functions

     haveRoutes(id){
        this._ApprovalsService.getQuantityByTemplate(id).subscribe(
          (quantity:any) => {
            if(quantity.count == 0){
              this.message = "Draft"
            }else{
              this.message = "Not Draft"
            }
          } 
      );
  }

And in the html.

<div class="dropdown mat-container" style=" margin-left: 2%;margin-right: 4%">
    <button class="dropbtn" (mouseover)= "haveRoutes(template._id)">Tipo</button>
        <div class="dropdown-content btn btn-primary">
            <a>{{message}}</a>
        </div>
</div>

It works but it's slower, so I want to try like the first way hopping to get the value quickly.

Answer 1

You could consider PRE-storing the values in the component, something like this pseudo-code:

component:

quantitiesDictionary:Dictionary = new Dictionary();
quantitiesDictionary.push(id, this._ApprovalsService.getQuantityByTemplate(id));

template:

{{ quantitiesDictionary[id].count == 0 ? 'Draft' : 'Not Draft' }}