从获取参数 angular 路由器绑定数据

Question

如何从 angular routerlink 中的参数获取值 ??

这是我的代码

Component.ts :

Hotels: struct_hotel;
id : struct_hotel['id'] 

constructor(
    private activatedRoute: ActivatedRoute,
    private _service: ResultService)
    {
      this.activatedRoute.queryParams.subscribe(params => {
          let id= params['id'];
          //console.log(id);  
      });
    }
getDetails(id): void {
    this._service.getHotel(this.id).then(Hotels => this.Hotels = Hotels);
}

ngOnInit():void {
    this.getDetails(this.id);
  }

服务：

private apidetail = 'http://localhost/bobobox/public/api/v1/room/show';
getHotel(id: string ): Promise<struct_hotel>
    {
        const url = `${this.apidetail}/${id}`;
        return this.http.get(url)
            .toPromise()
            .then(response => response.json() as struct_hotel[])
            .catch(this.handleError);
    }

我在 html 上这样调用它 {{Hotels.hotel_name}} 我得到了错误 ERROR TypeError: Cannot read property 'hotel_name' of undefined

谁能帮帮我？

Answer 1

由于您的请求是异步的，因此在绑定时使用安全导航运算符

{{Hotels?.hotel_name}}

如果 Hotels 是一个数组，那么你需要 ngFor 如下，

<tr *ngFor="let dataobj of Hotels">
     {{dataobj ?.hotel_name}}
</tr>

Answer 2

您在此处遇到的问题是由于异步调用可能在 ngOnInit 运行之前未就绪。

你需要在读取参数后将this.getDetails(this.id);放在构造函数中的订阅中

this.activatedRoute.queryParams.subscribe(params => {
      let id= params['id'];
      this.getDetails(this.id);
  });

此外，您尝试使用的对象类型与您从服务中获取的对象类型似乎有些不一致。

您似乎要通过 id 来获得一家酒店，因此响应应该是

then(response => response.json() as struct_hotel)

Answer 3

那么尝试控制台日志酒店，它可能未定义。

不过您的代码中有一个错误，您返回的是 struct_hotel 数组，并且您是 Promising struct_hotel（不是数组）。应该是哪一个？

如果是数组，不能直接用Hotels.hotel_name访问，应该是Hotels[i].hotel_name.

Answer 4

Hotels 一开始是未定义的。您必须使用新的 class 进行声明，因为您将其设置为 struct_hotel.

类型

Hotels: struct_hotel = new struct_hotel();

执行此操作后，您现在可以在具有默认值的绑定上使用 class 下的属性。

从获取参数 angular 路由器绑定数据

binding data from get parameters angular router

routerlink

angular