Question

我正在做一个项目，该项目从连接到后端的树莓派pi传感器接收湿度数据。在Angular Component中，我想显示数据。我希望工作尽可能地纯正。但是，我对自己的做法感到非常怀疑，希望能得到一些反馈。

getAllHumidities()做两件事：

订阅Observable，并以功能性方式返回数据。
将订阅保存为“湿度订阅”，但有副作用。

我觉得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变量始终保持最新状态。

尝试一下：

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>

Answer 2

我不太确定getAllHumidities（）函数返回值的目的是什么。如果您要订阅，最有可能只有在该功能完成工作后才更新湿度变量。

一种不错的推荐方法是使用async 管道来自动获取数据并从可观察对象中自动退订。

在组件中：

humidities$: Observable<Humidity[]> = this.humidityService.getAll();

constructor(private humidityService: HumidityService) { }

ngOnInit() { }

HTML模板中的

：

<ng-container *ngIf="(humidities$ | async) as humidities">
...
use the feched humidities
...
</ng-container>

有关async pipe的更多信息。

一种订阅和返回值的功能-提高功能纯度？

2 个答案: