I am encountering an issue in Angular 8 when trying to display my list on a page. Below is the code from my proposal-component.ts file:
import { Component, OnInit, Input } from "@angular/core";
import { ActivatedRoute, Params } from "@angular/router";
import { Proposal } from "./proposal";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Rx";
import { ProposalService } from "./proposal.service";
@Component({
selector: "proposal-show",
templateUrl: "proposal-show.component.html",
styleUrls: ["proposal-show.component.css"],
providers: [ProposalService]
})
export class ProposalShowComponent implements OnInit {
constructor(
private http: HttpClient,
private route: ActivatedRoute,
private proposalService: ProposalService
) {}
@Input()
proposal: Proposal;
ngOnInit(): void {
let proposalRequest = this.route.params.flatMap((params: Params) =>
this.proposalService.getProposal(params["id"])
);
proposalRequest.subscribe(response => (this.proposal = response.json()));
}
}
Additionally, here is my proposal.service.ts code:
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Proposal } from "./proposal";
import { Observable } from "rxjs/Rx";
import { throwError } from "rxjs";
import { map } from "rxjs/operators";
import { retry, catchError } from "rxjs/operators";
@Injectable()
export class ProposalService {
private proposalsUrl = "http://localhost:3002/proposals";
constructor(private http: HttpClient) {}
getProposals(): Observable<Proposal[]> {
return this.http.get<Proposal[]>(this.proposalsUrl).catch(this.handleError);
}
getProposal(id: number) {
return this.http.get(this.proposalsUrl + "/" + id + ".json");
}
handleError(error) {
let errorMessage = "";
if (error.error instanceof ErrorEvent) {
// client-side error
errorMessage = `Error: ${error.error.message}`;
} else {
// server-side error
errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
}
console.error(errorMessage);
return throwError(errorMessage);
}
}
Furthermore, this snippet is from my app.module.ts:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from "./app.component";
import { HomepageComponent } from "./homepage/homepage.component";
import { AppRoutingModule } from "./app-routing.module";
import { DocumentsComponent } from "./documents/documents.component";
import { DocumentService } from "./documents/document.service";
import { ProposalComponent } from "./proposal/proposal.component";
import { ProposalNewComponent } from "./proposal/proposal-new.component";
import { ProposalShowComponent } from "./proposal/proposal-show.component";
import { ProposalService } from "./proposal/proposal.service";
import {
NgbPaginationModule,
NgbAlertModule
} from "@ng-bootstrap/ng-bootstrap";
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
DocumentsComponent,
ProposalComponent,
ProposalNewComponent,
ProposalShowComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
NgbModule,
NgbPaginationModule,
NgbAlertModule,
HttpClientModule
],
providers: [DocumentService, ProposalService],
bootstrap: [AppComponent]
})
export class AppModule {}
This block of code represents the display page:
<div class="container">
<div *ngIf="proposal" class="card proposal-card">
<h1>{{ proposal.customer }}</h1>
<div class="col-md-6">
<div>
<p>Hi {{ proposal.customer }},</p>
<!-- Additional content omitted for brevity -->
</div>
</div>
</div>
</div>
An error that I see in the console:
core.js:6014 ERROR TypeError: response.json is not a function core.js:6014 ERROR TypeError: this.proposal is not a function at SafeSubscriber._next (proposal-show.component.ts:27) at SafeSubscriber.__tryOrUnsub (Subscriber.js:185) at SafeSubscriber.next (Subscriber.js:124) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at MergeMapSubscriber.notifyNext (mergeMap.js:69) at InnerSubscriber._next (InnerSubscriber.js:11) at InnerSubscriber.next (Subscriber.js:49) at MapSubscriber._next (map.js:35) at MapSubscriber.next (Subscriber.js:49)
Note: The API being utilized is functioning correctly without any issues. The API server is built using Rails.