从 chrome 存储中获取数据以在 Angular 组件中显示

Question

我想从 chrome 存储中获取一个列表并将其显示在我的 angular 组件中，目前我正在使用这样的函数

  myList: any[];
  dataSource: MatTableDataSource<any>;
  @ViewChild(MatTable, {static: true}) table: MatTable<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private fb: FormBuilder,
              private globalsService: GlobalsService,
              private snackbar: MatSnackBar) {
    chrome.storage.sync.get(['mylist'], this.getLists);
  }

  getLists(value: any): any{
    this.myList = value.mylist;
    this.dataSource = new MatTableDataSource<any>(this.myList);
  }

问题是我收到此错误：TypeError: Cannot read property 'length' of undefined，在我的 html 文件中，我为该组件使用属性长度，以便 myList 使用 mat-paginator 像这样：

  <mat-paginator #paginator [length]="myList.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

显然 myList 总是返回 undefined，但是当我在 getLists 函数中执行 console.log(value.mylist) 时它没有返回 undefined，我该如何解决这个问题？

Answer 1

定义dataSource如下。

dataSource: MatTableDataSource<any> = new MatTableDataSource([]) ;

分配 dataSource 值如下。

this.dataSource.data = new MatTableDataSource<any>(this.myList);

在模板中使用 ? 添加属性长度检查

  <mat-paginator #paginator [length]="myList?.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

在此处阅读更多内容 - https://developer.chrome.com/docs/extensions/reference/storage/#usage

Answer 2

我用Promises解决了它：

  myList: any[] = [];
  @ViewChild(MatTable, {static: true}) table: MatTable<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private fb: FormBuilder,
              private globalsService: GlobalsService,
              private snackbar: MatSnackBar) {
    getLists().then((value) => {
      this.myList = value.myList;
      this.dataSource = new MatTableDataSource<any>(this.myList);
    });
  }

getLists = (): any => {
  return new Promise((resolve, reject) => {
    chrome.storage.sync.get(['myList'], (value) => {
      if (value !== undefined){
        resolve(value);
      }
      else {
        reject();
      }
    });
  });
};

从 chrome 存储中获取数据以在 Angular 组件中显示

Get data from chrome storage to show it in an Angular component

google-chrome-extension

angular