web-dev-qa-db-ja.com

Angular 6-サービスからトリガーされるコンポーネントのDivを非表示または表示する

私は何かをするメソッドを持つサービスを持っています。

service.ts：

doSomething() {
    // Does something here
}

このサービスは、以下のコンポーネントと通信します。

myComponent.ts

私が持っている：divを持つmyComponent.html：

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

私がしたいのは、サービスのdoSomething（）メソッドのコードでdivを表示および非表示にすることです。

これと同様：

doSomething() {

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

これどうやってするの？

angulartypescriptangular6
6
Craig2018

特に、divを制御するためのフラグ値のセットをdoSomenthing（）メソッドに挿入します。

[〜＃〜] component [〜＃〜]

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

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

ただし、このコードはサービス内ではなくコンポーネント内にとどまる必要があります。

7
Antonio de la mata

マークアップにngIf属性を追加します。

*ngIf="IAmDoingSomething"

コンポーネント内では、次のことができます。

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