Javascript 如何调用使角度服务同步？

我正在尝试从

localStorage

读取项（menulist）。若为null，则调用一个服务，该服务将在从数据库获取菜单列表后存储它）。 服务似乎是异步的，因为在下面的代码中，我无法读取null的属性'sort'

ngOnInit() {

    this.menulist = localStorage.getItem('menulist');
    if (!this.menulist) {
      this.SetMenuList();
    }
    this.jsonmenulist = JSON.parse(this.menulist);
    this.jsonmenulist.sort(function (a, b) { 
      return a.mnuposno > b.mnuposno;
    });
    this.jsonmenulist = this.jsonmenulist.sort();
  }

SetMenuList() {
    this._UserspecificmenuaccessService.getRMA("driver")
      .subscribe((lst) => {
        if (lst && lst.length > 0) {
          localStorage.setItem('menulist', JSON.stringify(lst));
          this.menulist = localStorage.getItem('menulist');
          console.log(this.menulist); // gets called after this.jsonmenulist.sort? 
          return true;
        }
      }, (error) => {
        console.error(error)
      });
  }

控制台：

ERROR TypeError: Cannot read property 'sort' of null

[{"mnurecid":"4","mnuid":"menu1","mnuname":"Bin","mnuurl":"/bin/","mnuposno":"1.0","checked":true}, {"mnurecid":"12","mnuid":"menu9","mnuname":"Menu9","mnuurl":"/menu9","mnuposno":"9.0","checked":false}]

---

您可以编写需要在subscribe函数内执行的代码，以便仅在异步操作完成后执行。

您可以编写需要在subscribe函数内执行的代码，以便仅在异步操作完成后执行。

您可以使用toPromise（）rxjs库中的方法返回承诺，而不是可观察的

所以在您的服务中

getRMA(type) {
        return this.http.post(environment.baseURL + '/getmenulist', { drive: 
          type }, this.options).map((response) => response.json()
     ).toPromise().catch(e => {
    console.log(e);
    )}

    }

在您的组件中使用异步和等待

 async SetMenuList() {
       let response =  await 
        this._UserspecificmenuaccessService.getRMA("driver")
          console.log(response)         
      }

---

您可以使用rxjs库中的toPromise（）方法来返回承诺，而不是可观察的

所以在您的服务中

getRMA(type) {
        return this.http.post(environment.baseURL + '/getmenulist', { drive: 
          type }, this.options).map((response) => response.json()
     ).toPromise().catch(e => {
    console.log(e);
    )}

    }

在您的组件中使用异步和等待

 async SetMenuList() {
       let response =  await 
        this._UserspecificmenuaccessService.getRMA("driver")
          console.log(response)         
      }

---

不完全是关于asyncbroblem，您只需在分配它之前使用

this.menulist

。只要改变你运行代码的方式

ngOnInit() {
    this.menulist = localStorage.getItem('menulist');
    if (this.menulist) {
        this.sortMenuList(); // Sorting the menu if we have menulist already
    } else {
        this.SetMenuList(); // Else call the service and sort the menu then
    }
}

sortMenuList() {
    this.jsonmenulist = JSON.parse(this.menulist);
    this.jsonmenulist.sort(function (a, b) { 
      return a.mnuposno > b.mnuposno;
    });
    this.jsonmenulist = this.jsonmenulist.sort();
}

SetMenuList() {
    this._UserspecificmenuaccessService.getRMA("driver")
      .subscribe((lst) => {
        if (lst && lst.length > 0) {
          localStorage.setItem('menulist', JSON.stringify(lst));
          this.menulist = localStorage.getItem('menulist');
          this.sortMenuList(); // Sorting the menu if we have menulist already
        }
      }, (error) => {
        console.error(error)
      });
  }

---

顺便说一句，

SetMenuList

命名应该是

SetMenuList

（只是建议命名）。

不完全是关于asyncbroblem，您只需在分配它之前使用

this.menulist

。只要改变你运行代码的方式

ngOnInit() {
    this.menulist = localStorage.getItem('menulist');
    if (this.menulist) {
        this.sortMenuList(); // Sorting the menu if we have menulist already
    } else {
        this.SetMenuList(); // Else call the service and sort the menu then
    }
}

sortMenuList() {
    this.jsonmenulist = JSON.parse(this.menulist);
    this.jsonmenulist.sort(function (a, b) { 
      return a.mnuposno > b.mnuposno;
    });
    this.jsonmenulist = this.jsonmenulist.sort();
}

SetMenuList() {
    this._UserspecificmenuaccessService.getRMA("driver")
      .subscribe((lst) => {
        if (lst && lst.length > 0) {
          localStorage.setItem('menulist', JSON.stringify(lst));
          this.menulist = localStorage.getItem('menulist');
          this.sortMenuList(); // Sorting the menu if we have menulist already
        }
      }, (error) => {
        console.error(error)
      });
  }

---

顺便说一下，

SetMenuList

命名应该是

SetMenuList

（只是建议命名）。

您不能。和的可能副本。改进这一点的一个简单方法是从可观察到的转换为承诺，并在ngOnInit中使用async/await。你不能。和的可能副本。改进这一点的一个简单方法是，从可观察切换到承诺，并在ngOnInit中使用async/await。但我想知道我的选择，我可以。但我想知道我的选择。