如何将从api获取的ID传递给angular方法？

Question

I want to be able to display the name of the shop once I have clicked on the shop name from the list. Below is the code I have so far, it is not working! I have tried altering the HTML template, specifically the (code)="" piece. Am I doing something wrong? I have now got it working, but am receiving an error of "Cannot read property 'name' of undefined."

Shops.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-shops',
  templateUrl: './shops.component.html',
  styleUrls: ['./shops.component.css']
})
export class ShopsComponent implements OnInit {
  shops: any;
  shop: any;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getShops();
  }
  getShops() {
    this.http.get('https://localhost:44366/api/shops').subscribe(response => {
      this.shops = response;
    }, error => {
      console.log(error);
    });
  }
  getShop(id: number) {
    this.http.get('https://localhost:44366/api/shops/' + id).subscribe(response => {
      this.shop = response;
    }, error => {
      console.log(error);
    });
  }
}
Shops.html
<ul *ngFor="let s of shops">
  <li><a href="" (click)="getShop(s.id)">{{s.name}}</a></li>
  <li>{{s.address}}</li>
</ul>

<p>{{shop.name}}</p>

Answer 1

Your shop variable don't have any value in initial case. its undefined. so either you assign some value in ngOnInit() part to shop variable or use safe navigation symbol (?)

{{shop?.name}}

<ul *ngFor="let s of shops">
  <li><a href="" (click)="getShop(s.id)">{{s.name}}</a></li>
  <li>{{s.address}}</li>
</ul>

<p>{{shop?.name}}</p>

to check content of your shop variable please use this code

<p>{{shop | json }}

Answer 2

Try passing whole Object and use safe navigation operator to display the shop name as it is being retrieved from an asynchronous call

<ul *ngFor="let s of shops">
  <li><a href="" (click)="getShop(s.id)">{{s.name}}</a></li>
  <li>{{s.address}}</li>
</ul>

<p>{{shop?.name}}</p>

anyhow it is always better to create an Interface to deal with objects on the template.

Answer 3

Seeing as I am receiving a JSON object, I should have initialized my shop variable to type object, to begin with in my ts file.

shop: {};

I then had to go into my HTML template and alter the code a bit

<p>{{shop?.name}}</p>

It appears the correct way of going about this is to create an interface. I will be looking into that solution now.