在Angular中通过服务调用遍历函数

Question

我有2个调用服务来生成图片库的函数。

第一个功能获取画廊中的物品，第二个功能只是获取缩略图的base64字符串。

我的想法是，一旦成功返回图库数据，我便会遍历每个项目，并为每个项目运行loadthumbnail，并将其值传递给模型。

问题Im发现的是，我总是得到返回的UNDEFINED值。我不确定，但可能是不允许服务暂停以返回其数据，所以是否立即添加未定义的值？

功能是

loadTemplates(id: number) {

this.loadingTemplates = true;

this.dataService.getTemplates(id).subscribe((res: any) => {

  this.loadingTemplates = false;
  this.templates = res;

  for (let template of this.templates) {
    template.thumbnail = this.loadThumbnail(template.id);
  }

}, err => {
  this._modalService.openErrorToast('Error ' + err.status + ': ' + err.statusText, 'Error');
});
  }

  loadThumbnail(id: number) {

this.dataService.getThumbnail(id).subscribe((res: any) => {
  console.log("data:image/png;base64," + res.Value);
  return "data:image/png;base64," + res.Value;

}, err => {
  this._modalService.openErrorToast('Error ' + err.status + ': ' + err.statusText, 'Error');

  return "hi";
});
  }