如何在HTML页面展示Angular 4中HTTP GET请求的响应数据

Hey there! Let's get your fetched data showing up in your template. I'll break this down clearly based on the code you shared:

Step 1: Fix the Async Subscription in Your Component #

First, remember that HTTP requests are asynchronous—your current console.log(this.data) outside the subscribe block will print undefined because it runs before the data finishes loading. Move that log inside the subscription to see the actual fetched data:

getPosts(): void { 
  console.log("In getPosts"); 
  this.service.getData() 
    .subscribe( 
      resultArray => {
        this.data = resultArray;
        console.log(this.data); // Now this will show your loaded data
      }, 
      error => console.log("Error :: " + error) 
    );
}

Also, make sure you've declared and initialized the data property in your component class to avoid undefined errors:

// In your component.ts
data: any[] = []; // If you know your data structure, use a specific interface instead of `any`

Step 2: Render Data in the HTML Template #

Use Angular's *ngFor directive to loop through the data array and display each item. Replace propertyName with the actual fields from your API response (like id, file_name, etc.):

<!-- Your component's .html file -->
<!-- Show a loading state while data is being fetched -->
<div *ngIf="data.length === 0">Loading data...</div>

<!-- Render each data item once it's available -->
<div *ngFor="let item of data" class="data-entry">
  <p>File ID: {{ item.id }}</p>
  <p>File Name: {{ item.fileName }}</p>
  <!-- Add more properties from your API response as needed -->
</div>

If your API returns a single object instead of an array, skip *ngFor and directly access its properties:

<div *ngIf="data">
  <p>File Details: {{ data.description }}</p>
</div>

Step 3: Verify Module and Service Setup #

Double-check that you've imported HttpModule in your AppModule (Angular 4 uses Http instead of the newer HttpClient):

// app.module.ts
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    // ... other imports
    HttpModule
  ],
  // ...
})
export class AppModule { }

Also, ensure your data service is injected into the component correctly via the constructor:

// In your component.ts
constructor(private service: YourDataService) { }

That's all! Once you make these adjustments, your fetched data should render properly in the HTML template.

内容的提问来源于stack exchange，提问作者Abhay