如何将 chrome.storage 中的数据分配给 Angular 组件的变量

Question

如何将chrome.storage.sync.get中的数据分配给我的 Angular 组件的变量？

这是我的组件：

export class KTableComponent implements OnInit {

  words: string[] = [];

  constructor() {
  }

  ngOnInit(): void {
  }

  loadData() {
    const words = this.words;
    chrome.storage.sync.get({words: []}, function (result) {
      Object.assign(words, result.words)
    });
   // I want to stop here until data retrieved
  }

我的目标是检索数据，并将该数据分配给words变量后，再次渲染组件。 我知道chrome.storage.sync.get异步工作，我不知道如何等待结果。

Answer 1

您需要做的是等到您收到回复并显示结果。

你的代码应该，

• 知道数据何时加载。
• 加载数据时更新

我会以事物格式重写它。

words: string[] = [];
loading = false;

 loadData() {
    const words = this.words;
    loading = true;
    chrome.storage.sync.get({words: []}, this.onDataLoad);

onDataLoad(result) {
      loading = false;
      Object.assign(words, result.words);
    }

使用此代码，您可以在同步数据时显示加载器，并且 Angular 将在words获得分配值时为您更新视图。

如果您想这样做，直到单词 object 有值，您可以将其写入onDataLoad 。