chrome存儲：無法從回調函數更改組件狀態

我遇到問題，從異步回調函數切換材料設計組件的狀態。chrome存儲：無法從回調函數更改組件狀態

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 
    }); 
}

WORKS。此回調函數工作正常。

checked:boolean; 

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

注意：肯定有一個問題與渲染。當我點擊一些與此完全相關的按鈕時，該組件會被正確地重新渲染。

來源

2017-12-03 Adam Bednár

如果向正在工作的回調中添加超時值，它還能工作嗎？ –

是的，我只是忘了在這裏提到它。它工作得很好。 –

我認爲你可以做的是檢查data.isActive是否等於'checked'，如果不是，切換組件使它們一致。類似這樣的：

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

這應該觸發更改事件，以便將更改傳播到視圖。

來源

2017-12-03 01:30:09

這基本上是我在做什麼減去支票。我添加了支票，但仍然無法使用。 –

我繞着Promise包裝了異步調用，並開始工作。有趣的觀測量（我也嘗試過他們）沒有工作

這裏是工作的代碼

COMPONENT：

checked:boolean; 

constructor(private storageService: StorageService) {} 

ngOnInit() { 
    this.getStorageData(); 
}

異步重要

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} 
     }); 
    }); 
    }

任何人都可以解釋爲什麼觀察對象在承諾時不工作嗎？

來源

2017-12-03 12:59:49

chrome存儲：無法從回調函數更改組件狀態

回答

相關問題