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

注意：肯定有一个问题与渲染。当我点击一些与此完全相关的按钮时，该组件会被正确地重新渲染。

如果向正在工作的回调中添加超时值，它还能工作吗？ –

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

答

我认为你可以做的是检查data.isActive是否等于'checked'，如果不是，切换组件使它们一致。类似这样的：

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

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

这基本上是我在做什么减去支票。我添加了支票，但仍然无法使用。 –

答

我绕着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} 
     }); 
    }); 
    }

任何人都可以解释为什么观察对象在承诺时不工作吗？

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

相关推荐