chrome storage：コールバック関数からコンポーネント状態を変更できません

Question

非同期コールバック関数から重要なコンポーネントの状態を切り替える際に問題が発生しました。

HTMLマークアップ

<mat-slide-toggle 
     class="example-margin" 
     [color]="color" 
     [checked]="checked"> 
</mat-slide-toggle> 

が 動作しない私は、コールバック関数は、変数を「this.checked」が、何らかの理由でそれが伝播していないなど、それは必要なすべてのコンテキストを取得することを確信しています材料設計コンポーネント。

checked:boolean; 

ngOnInit() { 
    chrome.storage.local.get('isActive', (data) => { 
     console.log(data); // {isActive:true} 
     console.log(this); //context is visible 
     this.checked = data.isActive; //true 
     console.log(this.checked); //true 
    }); 
} 

ワークス。 このコールバック関数は正常に機能します。

checked:boolean; 

ngOnInit() { 
    setTimeout(() => { 
     this.checked = true; 
    }, 5000) 
} 

注：レンダリングの問題は間違いなくあります。これに完全に反するいくつかのボタンをクリックすると、このコンポーネントは正しくレンダリングされます。

Answer 1

あなたができることは、data.isActiveが 'checked'と等しいかどうかをチェックし、そうでない場合、コンポーネントが一貫性を持つように切り替えることです。次のようなものがあります。

ngOnInit() { 
    chrome.storage.local.get('isActive', (data) => { 
     if (data.isActive != checked){ 
      this.toggle(); 
     } 
    }); 
} 

変更イベントがトリガーされ、変更がビューに伝播されるはずです。

Answer 2

私はプロミスの周りに非同期コールをラップし、動作するようになりました。

checked:boolean; 

constructor(private storageService: StorageService) {} 

ngOnInit() { 
    this.getStorageData(); 
} 

ASYNC重要

async getStorageData(): Promise<any> { 
    let storageData = await this.storageService.getStorageData(); 
    console.log(storageData); //{isActive:true}; 
    this.checked = value.isActive; //this works!!! 
    //if you want you can return a value and access it with then() function in the ngOnInit 
} 

：観測は（私もそれを試してみました）ここで

を動作しませんでしたおかしい事は作業コード

コンポーネントですサービス

public getStorageData():Promise<any> { 
    return new Promise((resolve, reject) => { 
     chrome.storage.local.get('isActive', (data) => { 
     console.log(data); //data 
     resolve(data); {isActive:true} 
     }); 
    }); 
    } 

約束事の間にオブザーバブルが動作しない理由を誰もが説明できますか？