Question

从列表中单击商店名称后，我希望能够显示商店名称。下面是我到目前为止的代码，它不起作用！我尝试更改HTML模板，特别是（code）=“”部分。难道我做错了什么？我现在可以正常使用，但是收到错误消息“无法读取未定义的属性'名称'。”

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

您的商店变量在初始情况下没有任何值。其未定义。因此，您可以在ngOnInit（）部分中将一些值分配给shop变量，或使用安全的导航符号（？）

<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>

要检查商店变量的内容，请使用此代码

<p>{{shop | json }}

Answer 2

尝试传递整个对象，并使用安全的导航运算符显示从异步调用中检索到的商店名称

<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>

无论如何，最好创建一个 Interface 来处理模板上的对象。

Answer 3

看到我正在接收JSON对象时，我应该先将自己的shop变量初始化为type对象，然后再从ts文件中开始。

shop: {};

然后我必须进入HTML模板并稍微修改代码

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

看来解决此问题的正确方法是创建一个接口。我现在将研究该解决方案。

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

3 个答案: