在运行时调用 Observable 并渲染结果

Question

我有一个视图，当点击这样的按钮时

  <a class="button" (click)="takeInpit(id)" routerLinkActive="activebutton"  >Request</a>

触发此 takeInput 方法

public takeInpit(Id:string): void{

    let navigationExtras: NavigationExtras = {
      queryParams: {
        "id":Id
      }
  };
  this.router.navigate(["request"], navigationExtras);
  }

然后我导航到这个名为请求的组件：

//takes parameters from container
  public constructor(private route: ActivatedRoute, private itemService: SingleItemService) {
    this.route.queryParams.subscribe(params => {
        this.requestedItem = params["id"];
        this.itemService.setIDs(this.requestedItem);
        this.itemService.getSingleItemRequest();
    });
    this.item = this.itemService.getName();
    //console.log(this.item);
    
}

我调用此服务的想法是我可以从 API

中动态获取数据

export class SingleItemService {

  urlSingle:string = 'http://localhost:8080/getSpecificItem?itemId=';
  item:any;
  
  constructor(private htpp: HttpClient){
  }

  public setIDs(id:string){
    this.urlSingle + id;
}

  public getSingleItemRequest():void{
     this.htpp.get<Item>(this.urlSingle).subscribe( data=>{
     this.item = data;
     console.log("data is", data);
     }
   );
   }

   public getName(): string{
      return this.item.name;
    
   }
}

然后在请求组件视图（基本上调用服务的视图）中记录数据

<div ngIf* ="item"><div>{{item}}</div>
</div>

但是没有记录信息。检查控制台我看到这条消息：

ERROR Error: Uncaught (in promise): TypeError: this.item is undefined
getName@http://localhost:4200/main.js:368:9

所以它会在可观察对象完成之前尝试访问服务的 get 方法。我该如何解决？

Answer 1

在 SingleItemService return Observable from getSingleItemRequest 中，使用 tap 将响应分配给项目。

import { tap } from 'rxjs/operators';

public getSingleItemRequest():Observable<any>{
     return this.htpp.get<Item>(this.urlSingle).pipe(
        tap(data => this.item = data)
    );
}

在RequestComponent

item = '';

this.route.queryParams.subscribe(params => {
    this.requestedItem = params["id"];
    this.itemService.setIDs(this.requestedItem);
    this.itemService.getSingleItemRequest()
    .subscribe(_ => this.item = this.itemService.getName());
    // .subscribe(response => this.item = response.name);
});

在运行时调用 Observable 并渲染结果

Call Observable on runtime and render the result

angular

observable

angular-router

angular-httpclient