typescript - Angular 6 - Dölj eller visa en Div i komponent utlösts från en tjänst

Jag har en tjänst som har en metod som gör något.

service.ts:

doSomething() {
    // Does something here
}

Denna tjänst kommunicerar med komponenten nedan:

myKomponent.ts

Jag har: myComponent.html som har en div:

<div class="myDiv">Something Here</div>

Det jag vill göra är att visa och dölja div:en med kod i service-metoden doSomething().

Som detta:

doSomething() {

    1. Show myDiv   
    2. // Do something here
    3. Hide myDiv
}

Hur kan jag göra detta?

Svar #1

Särskilt infogar jag i doSomenthing()-metoden inställningen av ett flaggvärde för att kontrollera div.

KOMPONENT

doSomething() {
  service
    .doSomething()
    .subscribe(
       r => {
          this.show = true;   
          2. // Do something here
          this.show = false;  
       }
    );
}

<div *ngIf="show" class="myDiv">Something Here</div>

Men den här koden måste stanna i komponenten, inte i tjänsten.

Svar #2

Lägg till ngIf-attributet i markeringen:

*ngIf="IAmDoingSomething"

Inom komponenten kan du göra följande:

export class MyDoSomethingComponent{
public IAmDoingSomething = false;
...
   invokeServices = async  () => {
       this.IAmDoingSomething = true;
       await doSomething();
       this.IAmDoingSomething = false;
    }
...
}

Relaterade artiklar