Question

我正在跟踪英雄示例，开发一个基本的联系人列表应用程序作为测试，我正在通过教程的最后http部分，在'通过id获取英雄'步骤。

应用程序运行并显示联系人列表，但点击某个项目显然不会在联系人详细信息组件中返回任何联系人，尽管网址显示正确。

我在命令提示符中没有显示错误消息，但是浏览器控制台根据前面教程的http部分中定义的构造错误处理程序返回以下对象作为响应：

body: Object { error: "Collection '${id}' not found" }
headers: Object { normalizedNames: Map, lazyUpdate: null, lazyInit: HttpHeaders/this.lazyInit() }
status: 404
statusText: "Not Found"
url: "${this.contactsUrl}/${id}"
__proto__: Object { … }

不确定如何设置一个完整的Angular 2项目，包括plnkr中的节点，所以我能做的最好就是在这里粘贴我的代码。

认为这些将是唯一需要的文件，但如果您需要了解更多文件，请告诉我。

内存-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {

createDb() {
    const contacts = [
        {
            id: 1,
            title: 'Mr',
            forename: 'N',
            surname: 'C',
            gender: 'Male',
            mobileNumber: '-',
            homeTelephone: '-',
            workTelephone: '-',
            email: '-',
            workEmail: '-',
            address: {
                line1: '-',
                line2: '-',
                townCity: '-',
                county: '-',
                country: '-',
                postcode: '-'
            }
        },

etc...

contact.service.ts

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';

import { Contact } from './contact';
//import { CONTACTS } from './mock-contacts';

import { MessagesService } from './messages.service';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
}

@Injectable()

export class ContactService {

private contactsUrl = 'api/contacts';

constructor(
    private http: HttpClient, 
    private messagesService: MessagesService) { }

getContacts(): Observable<Contact[]> {
    return this.http.get<Contact[]>(this.contactsUrl)
}

getContact(id: number): Observable<Contact> {
    const url = '${this.contactsUrl}/${id}';
    return this.http.get<Contact>(url)
        .pipe(
            tap(_ => this.log('Fetched contact id: ${id}')),
            catchError(this.handleError<Contact>('getContact id: ${id}'))
        )
}

private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

        console.error(error);

        this.log(`${operation} failed: ${error.message}`);

        return of(result as T);
    }
}

private log(message: string) {
    this.messagesService.add('ContactService: ' + message);
}

}

与-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Contact } from '../contact';
import { ContactService } from '../contact.service';

@Component( {
  selector: 'app-contact-detail',
  templateUrl: './contact-detail.component.html',
  styleUrls: ['./contact-detail.component.scss']
})

export class ContactDetailComponent implements OnInit {

@Input() contact: Contact;

constructor(
    private route: ActivatedRoute, 
    private contactService: ContactService, 
    private location: Location) { }

getContact(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.contactService.getContact(id)
        .subscribe(contact => this.contact = contact);
}

goBack(): void {
    this.location.back();
}

ngOnInit(): void {
    console.log('|| Contact Detail Component Active ||');
    this.getContact();
}

}

Answer 1

在分配网址的getContact方法中，您使用的是单引号而不是后标记。这意味着您的网址设置为"${this.contactsUrl}/${id}"而不是"api/contacts/1"

所以正确的网址分配应该是

// getContact method
const url = `${this.contactsUrl}/${id}`;

Doc template literals

Angular Tour of Heroes HTTP - 列出节目，但细节没有

1 个答案: