javascript - 一个函数即可订阅并返回值 - 提高函数纯度？

Question

我正在开发一个项目，该项目从连接到后端的树莓派传感器接收湿度数据。在 Angular 组件中，我想显示数据。我希望工作尽可能实用且纯粹。然而，我对我的方法感到非常怀疑，并希望得到一些反馈。

getAllHumidities() 做了两件事:

• 订阅 Observable，并以函数方式返回数据。
• 将订阅保存为“humiditySubscription”，但作为副作用。

我觉得 getAllHumidities() 并不是按照最佳实践思维编写的。我可以并且应该避免创建这两个组件属性吗？

export class HumidityListComponent implements OnInit, OnDestroy {

  humidities: Humidity[];
  humiditySubscription: Subscription;

  constructor(private humidityService: HumidityService) {

  }

  ngOnInit() {
    this.humidities = this.getAllHumidities();
  }

  getAllHumidities(): Humidity[] {
    let humidities: Humidity[];
    this.humiditySubscription = this.humidityService.getAll().subscribe(data => {
      humidities = data;
    });
    return humidities;
  }

  ngOnDestroy() {
    this.humiditySubscription.unsubscribe();
  }
}

Answer 1

您不需要 getAllHumidities 函数。您只需订阅您的服务onInit即可。
这将使您的湿度变量始终保持最新。

试试这个:

humidities: Humidity[] = [];

constructor(
   public humidityService: HumidityService
) { }

ngOnInit() {
   this.humidityService.getAll().subscribe((data: Humidity) => {
      this.humidities = data;
   });
}

或者如果您希望 html 中的内容非常短:

<div *ngIf="(this.humidityService.getAll() | async) as humidities">
   // The slice pipe will give you the value at the index 0 to 5
   <div *ngFor="let humiditie of humidities | slice:0:5; let i = index">
      Index: {{i}} <br> 
      Value: {{humiditie}}
   </div>
</div>