Angular 6 通过 json 并根据 id 获取数据

Question

错误

ServiceDetailComponent.html:3 错误类型错误：无法读取属性 未定义的“服务名称”；在 Object.eval [作为 updateRenderer] (ServiceDetailComponent.html:3);在 Object.debugUpdateRenderer [as updateRenderer] (core.js:11080);在 checkAndUpdateView (core.js:10456);在 callViewAction (core.js:10692);在 execComponentViewsAction (core.js:10634);在 checkAndUpdateView (core.js:10457);在 callViewAction (core.js:10692);在 execEmbeddedViewsAction (core.js:10655);在 checkAndUpdateView (core.js:10452);在 callViewAction (core.js:10692);

---

服务：

import { IServices } from './../../services';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {

  // private _url: string = 'https://api.myjson.com/bins/1d8suw';
  private _url: string = 'https://api.myjson.com/bins/1azcrc';


  constructor(private http: HttpClient) { }

  getServices(): Observable<IServices[]> {
    return this.http.get<IServices[]>(this._url);
  }


  getService(id: number) {
    return this.http.get<IServices[]>(this._url + id );
  }

}

组件

import { Component, OnInit } from '@angular/core';
import { ServiceService } from '../services/service.service';
import { ActivatedRoute, Router } from '@angular/router';
import { IServices } from 'src/app/services';

@Component({
  selector: 'app-service-detail',
  templateUrl: './service-detail.component.html',
  styleUrls: ['./service-detail.component.css']
})
export class ServiceDetailComponent implements OnInit {
  id: number;
  service: IServices[];
  constructor(private serviceService: ServiceService,
    private route: ActivatedRoute
    ) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];

    this.serviceService.getService(this.id)
      .subscribe(service => {
          this.service = service;
      });

  }

}

HTML 结果

<p>
  service-detail works!
</p>

{{ service.serviceName }}

Answer 1

1. 你的名字到处都是。 service: IService[] --> 你需要一个服务列表，所以让它services: IService[]。
2. this.services 属性将是未定义的，直到您从服务器获得响应。如果你想在模板中使用它，你应该使用elvis 操作符——这是? 的一个花哨的名字，看起来像这样：service?.serviceName。这实质上是告诉 Angular 在 service 未定义时不要抛出错误，并在该值可用时重新呈现该值。

3. 由于this.services 是一个数组，您需要使用*ngFor 结构指令循环遍历项目：

   <p *ngFor="let service of services"> {{service.serviceName}} </p>

如您所见 - 我没有在这里使用 elvis 运算符，因为除非 services 值被初始化，否则 *ngFor 不会呈现任何内容。

Answer 2

您将收到 undefined 错误，因为您尚未在 ServiceDetailComponent 中初始化 service 属性。你在回调函数中初始化它，当服务器返回响应时，它会异步运行。

检查 null 或使用以下可选语法：

{{ service?.serviceName }}

Answer 3

服务：IServices[];您正在尝试访问“服务”数组的属性。 引用数组中的项，然后引用属性。