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

Promise 주변에서 비동기 호출을 래핑하여 작동하기 시작했습니다.

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 
} 

다음 Observables은 (나는 또한 그들을 시도) 여기

를 작동하지 않았다 재미있는 것은 작업 코드

COMPONENT에게 있습니다 서비스

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

약속하는 동안 Observables가 작동하지 않는 이유는 누구나 설명 할 수 있습니까?