I am trying to display data from a local json file to a table with angular 12, but first step I just want to console data from that file. But I found the error like I wrote in the title. Here is my code: app.module.ts:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialExampleModule} from '../material.module';
import {TablePaginationExample} from './table-pagination-example';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [TablePaginationExample],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
HttpClientModule,
MatNativeDateModule,
MaterialExampleModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [TablePaginationExample],
})
export class AppModule {}
table-pagination-example.ts:
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { ServerHttpService } from './Services/server-http.service';
/**
* @title Table with pagination
*/
@Component({
selector: 'table-pagination-example',
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample implements OnInit {
private serverHttp: ServerHttpService;
displayedColumns: string[] = ['secCd', 'secType', 'secSName', 'secName', 'capitalValue', 'listedQty', 'foreignMaxQty', 'stockDividendRate', 'cashDividendRate', 'marketCd', 'tradingLot', 'parValue', 'maxRoom', 'status', 'remarks'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit(): void {
this.dataSource.paginator = this.paginator;
this.serverHttp.getProfile().subscribe((data) => {
console.log(data);
})
}
}
export interface PeriodicElement {
// action: string,
// secCd: string,
// secType: string,
// secSName: string,
// secName: string,
// capitalValue: number,
// listedQty: number,
}
const ELEMENT_DATA: PeriodicElement[] = []
server-http.service.ts:
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, Observable } from 'rxjs';
import { throwError } from 'rxjs/internal/observable/throwError';
@Injectable({
providedIn: 'root'
})
export class ServerHttpService {
private httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
}
private REST_API_SERVER = 'http://localhost:3000'
constructor(private httpClient: HttpClient) { }
public getProfile(): Observable<any> {
const url = `${this.REST_API_SERVER}/profile`;
return this.httpClient
.get<any>(url, this.httpOptions)
.pipe(catchError(this.handleError));
}
private handleError(error: HttpErrorResponse) {
if (error.status === 0) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong.
console.error(
`Backend returned code ${error.status}, body was: `, error.error);
}
// Return an observable with a user-facing error message.
return throwError(() => new Error('Something bad happened; please try again later.'));
}
}
Here is the picture of console screen: image
Thank u for your attention and if there are any problem with my question or my English, please let me know. This is the first time I post a question to Stackoverflow.
CodePudding user response:
You have to remove private serverHttp: ServerHttpService;
and add the following code instead.
constructor(private serverHttp: ServerHttpService) {}
You can read about the dependency injection of Angular services in detail here.