角9-不能在ngFor语句中使用可观察的

Question

我有以下函数从Angular 9服务返回数据：

@Injectable({
   providedIn: 'root'
})
export class SecurityService {

constructor(private http: HttpClient) { }

public getFunds(): Observable<any> {
  // could do a loader here, or in an interceptor - same for the post, put and delete
  let data = this.http.get<any>("https://localhost:44337/security/").pipe(   
    map(response => response)
  );
return data;

} }

服务按预期返回数据。我这样称呼它：

export class AppComponent {   
funds$!: Observable<any>; // "!" turns off check to make sure vars are initialized, not good tho
constructor(private securityService: SecurityService) {}

ngOnInit() {
    this.funds$ = this.securityService.getFunds();
    this.securityService.getFunds().subscribe(f => (this.funds$ = f));
  }
}

在我的html中，我尝试使用如下数据：

 <tr *ngFor="let f of funds$">
  <td>{{ f.id }}</td>
  <td>{{ f.name }}</td>
  <td>{{ f.assets }}</td>
</tr>

我得到这个错误：TS2322：类型'可观察'是不能分配给类型'任何[]|迭代|（迭代

这在几年前是可行的。显然，9改变了一些东西。。。

Answer 1

当您订阅observable时，它通过getFunds方法返回，最终返回数据。因此，无需将基金美元定义为可观察的。下面的代码可能会对您有所帮助。

funds: any[] = [];

ngOnInit() {
    this.securityService.getFunds().subscribe(f => (this.funds = f));
  }
}

在HTML中，使用ngFor中的资金变量。

Answer 2

当我们在超文本标记语言模板中使用异步管道时，我们不必订阅异步管道中引用的可观察到的。异步管道在幕后为我们订阅它。因此，在组件中，我们只需要构建可观察的。

此外，在访问异步管道数据之前，需要使用*ngIF确保流可用。

在这些线上，有几个变化-

在你的组件中-

export class AppComponent {   
  funds$: Observable<any>;
  constructor(private securityService: SecurityService) {}

  ngOnInit() {
      this.funds$ = this.securityService.getFunds(); // Only this line is enough
  }
}

在HTML中-

<ng-container *ngIf="funds$">
    <tr *ngFor="let f of funds$|async">
      <td>{{ f.id }}</td>
      <td>{{ f.name }}</td>
      <td>{{ f.assets }}</td>
    </tr>
</ng-container>

Answer 3

使用异步管道并将模板更改为：-

<ng-container *ngIf="funds$">
    <tr *ngFor="let f of funds$|async">
      <td>{{ f.id }}</td>
      <td>{{ f.name }}</td>
      <td>{{ f.assets }}</td>
    </tr>
</ng-container>