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

  • Z时代
  • 2024-01-10
  • 分类：问答

我遇到问题，从异步回调函数切换材料设计组件的状态。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存储：无法从回调函数更改组件状态 的全部内容， 来源链接： utcz.com/qa/259078.html

回到顶部