Javascript EAI内容充实器的数据获取模式

我正在本地存储器中保存页面设置。很好用

const settings = [amount, hours]
localStorage.setItem('settings', JSON.stringify(settings));

现在，相同的服务类应该只返回金额。当然，现在这是一个承诺。好的，但是我想先分解amount和hours的数据集，只返回amount。类似这样的情况：当然这是行不通的，因为函数已经完成，而异步数据获取仍在进行中

public getAmount(){
    this.storage.get('settings').then((settings) => {
      console.log('SettingsService: settings=' + settings[0]);
      this.amount= settings[0];
    });

    return this.amount;
  }

无论如何，处理这种数据分解的最佳实践或模式是什么

还将从此函数返回新承诺，或。。 只需返回一个数字，即金额。 若我想到从不同的来源收集数据，为了组成更智能的返回值，还需要在所有部分数据到达之前进行阻塞。那么，我们如何分别在JavasScript TS/Angular中阻止数据获取呢

谢谢分享您的想法。

我至少看到两件事： 1为什么要将数据保存在数组中：[数量，小时]？最好创建一个模型接口，并将其存储在对象而不是数组中：

export interface Settings {
   amount: Amount; // or maybe number - choice is yours?
   hours: number;
}

一旦你有了模型，它就会变得非常简单。你应该使用可观察的而不是承诺。一旦你有了可观察的，就很容易将设置映射到金额：

import { from } from 'rxjs';

var observableFromPromise =  from(promiseSrc);
public getAmount(): Observable<Amount> {
    from(this.storage.get('settings')).pipe(
        map((settings: Settings) => settings.amount)
    );
}

然后，您将能够在模板或其他组件/服务中使用金额值

// create observable field in component.ts
public amount$: Observable<Amount> = service.getAmount();

// use in component.html
<p>{{amount$ | async}}</p>

// or use in component.ts
this.amount$.subscribe(amount => console.log('this is the amount:', amount));

---

谢谢你对rxjs的回答，Pawel。我了解数据建模。我还不明白，当从其他来源收集数据时，这是如何阻塞的。我现在需要一个程序片段来测试它。我要回到这个话题上。你能不能把这些$observable绑定到一个rective表单上，以便不断地进行双向更新？更改可能会出现在本地存储和输入字段中。如果您有更新方法，则有两种方法。第一个-使用FormControl->control.valueChanges.subscribevalue=>this.service.updatevalue；中的valueChanges；。但这可能不是最好的方法，因为控件中的值可能未处于正确的状态，例如无效，或者您不想用此类订阅使浏览器过载控件中的每个更改都会导致此.service.update。。。被称为。在我看来，最好在提交表单时点击该方法，例如，单击一个按钮：this.service.updatecontrol.value