如何在其他地方使用subscribe（）的数据？

Question

onKeyUp(event: any): void {
  this.technologiesService.getTechnologies(event.target.value)
    .subscribe(data => {
       this.myData = data;
    });
}

data的输出是：

我想将data声明为属性，以便可以在其他地方使用它。如您所见，我已经使用this.myData = data进行了尝试，并且myData在班级顶部myData = [];的定义如下。

这就是我尝试使用myData的方式：

<mat-option *ngFor="let data of this.myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

但是我遇到以下错误：

  

错误错误：InvalidPipeArgument：''管道'AsyncPipe'

     

ERROR TypeError：无法读取null的属性“ dispose”

我在做什么错了？

Answer 1

您不应同时使用订阅或异步管道之一。应该是：

<mat-option *ngFor="let data of myData" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

使用替代时。 如果您不想使用订阅但要使用异步，则应为：

<mat-option *ngFor="let data of myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

ts：

onKeyUp(event: any): void {
  this.myData = this.technologiesService.getTechnologies(event.target.value)
}

Answer 2

this.myData不是异步的，因此不需要异步管道

<mat-option *ngFor="let data of myData" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

将修复它。

但是，我建议改为将Observable设置为实例变量。

onKeyUp(event: any): void {
  this.myData = this.technologiesService.getTechnologies(event.target.value)
}

<mat-option *ngFor="let data of myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>

Answer 3

<mat-option *ngFor="let data of myData | async" [value]="data.technology">
  <span>{{ data.technology}}</span>
</mat-option>