chrome 存储：无法从回调函数更改组件状态答案

【问题标题】：chrome storage: Unable to change component state from a callback functionchrome 存储：无法从回调函数更改组件状态
【发布时间】：2017-12-03 01:08:22
【问题描述】：

我在从异步回调函数切换材质设计组件的状态时遇到问题。

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

注意：渲染肯定存在问题。当我单击一些与此完全无关的按钮时，该组件会正确重新渲染。

【问题讨论】：

在工作回调中添加超时值是否仍然有效？
是的，我只是忘了在这里提及。它工作得很好。

标签： javascript angular typescript google-chrome-extension

【解决方案1】：

我认为您可以做的是检查 data.isActive 是否等于“已检查”，如果不是，请切换组件以使其保持一致。像这样的：

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

这应该触发一个更改事件，以便将更改传播到视图。

【讨论】：

这基本上就是我正在做的减去支票。我添加了支票，但它仍然无法正常工作。

【解决方案2】：

我将异步调用包装在 Promise 周围，它开始工作。有趣的是 Observables（我也试过了）没有工作

这是一个工作代码

组件：

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

谁能解释为什么 Observables 不工作而 Promise 工作？

【讨论】：