Angular 5从localhost接口获取JSON并加载到表格的问题求助

It looks like you're running into a common hurdle when trying to pull data from a separate backend server while developing with Angular. Let’s walk through the most likely fixes step by step:

1. Confirm Your Backend Endpoint is Functional #

First things first—make sure your backend server at localhost:3000 is up and running, and the /clientes endpoint returns valid JSON. Open your browser and navigate directly to http://localhost:3000/clientes; you should see the JSON data you expect. If this doesn’t work, the issue lies with your backend setup, not Angular.

2. Resolve Cross-Origin Resource Sharing (CORS) Block #

Since your Angular app is probably running on the default port localhost:4200 and your backend is on 3000, browsers block this request due to CORS security policies. You’ll need to enable CORS on your backend:

• If you’re using Node.js/Express, install the cors package first:

  npm install cors --save
  

  Then add it to your server code to allow cross-origin requests:

  const cors = require('cors');
  const express = require('express');
  const app = express();
  
  // Enable CORS for all incoming requests
  app.use(cors());
  
  // Your existing /clientes route
  app.get('/clientes', (req, res) => {
    // Send your JSON data here
  });
  

3. Update Your Angular HttpClient Request #

Swap the relative assets path for the full backend URL, and adjust how you handle the response data (your backend’s JSON structure might not be a simple array of strings):

// In general.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Component({
  // Your component metadata here
})
export class GeneralComponent implements OnInit {
  myVals: any[]; // Use a specific interface instead of any[] if you know the data structure

  constructor(private httpService: HttpClient) { }

  ngOnInit() {
    this.httpService.get('http://localhost:3000/clientes')
      .subscribe(
        data => {
          console.log('Fetched data:', data); // Log to inspect the actual response structure
          this.myVals = data as any[]; // Adjust casting based on your backend's output
        },
        (err: HttpErrorResponse) => {
          console.error('Full error details:', err); // Log the full error for better debugging
        }
      );
  }
}

4. Verify HttpClientModule is Imported #

Double-check that you’ve added HttpClientModule to your AppModule (or the module where your component lives):

// In app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // Other modules (like BrowserModule)...
    HttpClientModule
  ],
  // ...
})
export class AppModule { }

5. Fix Your Table Template #

Ensure your table is correctly iterating over myVals with the right property names. For example:

<table>
  <tr *ngFor="let cliente of myVals">
    <td>{{ cliente.nome }}</td> <!-- Replace with your actual JSON property names -->
    <td>{{ cliente.email }}</td>
  </tr>
</table>

By working through these steps, you should be able to fetch data from your backend and display it in your table smoothly. If you hit any specific error messages, feel free to share them for more targeted help!

内容的提问来源于stack exchange，提问作者Leonardo Assunção