使用订阅初始化对象

Question

我正在从 API 获取数据，并且正在像这样初始化数据：

export class ForumComponent implements OnInit {

  @Input() id_foro: number = 3;

  nombre: string = '';
  desc: string = ''
  foro!: Forum;
  
  constructor(private forumService: ForumService) { }

    

  ngOnInit(): void {
    this.forumService.getById(this.id_foro).subscribe((data: Forum) => {
      this.foro = data;
    });
    
  }

}

我该怎么做？

forum: Forum = this.forumService.getById(this.id_foro).subscribe();

GetById 函数：

getById(id: number): Observable<Forum> {
    return this.httpClient.get<Forum[]>(`http://localhost:3000/forum/${id}`)
    .pipe(map((response: Forum[]) => response[0]));
  }

Answer 1

getById 已经返回一个可观察对象，因此无需订阅。只需使用 | async 管道对响应做出反应。

我建议删除 ! 除非你 100% 确定，否则总会有一个值（我怀疑这一点）。

让我们添加$来表明它是一个可观察的（它只是一种命名变量的方式，没有其他花哨的）。

foro$: Observable<Forum> = this.forumService.getById(this.id_foro);

<div>{{ foro$ | async }}</div>

编辑以从可观察对象访问对象

<div *ngIf="(foro$ | async)?.nombre">{{ (foro$ | async)?.nombre }}</div>

<ng-container *ngIf="foro$ | async as forum">
  <div *ngFor="let prop of forum | keyvalue">
      Key: <b>{{prop.key}}</b> and Value: <b>{{prop.value}}</b>
  </div>
</ng-container>

使用订阅初始化对象

Initialize object with Subscribe

api

service

observable

angularjs

angular