Angular新手求助：如何填充表格空列？JSON解析至DOM场景

Hey there! As a fellow Angular developer who's fumbled through data binding issues early on, let's sort out this empty table column problem for you. Based on the fabricAnswers JSON snippet you shared, I'll walk through two common scenarios and how to fix empty columns in each case.

Scenario 1: Displaying JSON items as table rows (empty fields in rows) #

If you're rendering each fabricAnswers entry as a table row and seeing empty columns because some fields might be missing in the JSON, use nullish coalescing (??) or *ngIf to fill in default values.

Step 1: Fetch and store the data in your component #

First, make sure you're correctly fetching and storing the JSON data:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fabric-table',
  templateUrl: './fabric-table.component.html'
})
export class FabricTableComponent implements OnInit {
  fabricAnswers: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Replace with your actual API endpoint
    this.http.get<{ fabricAnswers: any[] }>('/api/fabric-data')
      .subscribe(response => {
        this.fabricAnswers = response.fabricAnswers;
      });
  }
}

Step 2: Build the table with default values for empty fields #

In your template, use ?? to provide fallback text/values when a field is missing or null:

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Metric</th>
      <th>Value</th>
      <th>Platform</th>
      <th>Sync Time</th>
      <th>App ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of fabricAnswers">
      <td>{{ item.id ?? 'N/A' }}</td>
      <td>{{ item.answer ?? 'Unnamed Metric' }}</td>
      <td>{{ item.answerValue ?? 0 }}</td>
      <td>{{ item.platform ?? 'Unknown' }}</td>
      <td>{{ item.syncTime | date:'yyyy-MM-dd HH:mm:ss' ?? 'No Sync Data' }}</td>
      <td>{{ item.appId ?? 'N/A' }}</td>
    </tr>
  </tbody>
</table>

This ensures no column stays empty—missing data gets replaced with a user-friendly default.

Scenario 2: Displaying metrics as table columns (missing metric columns) #

If you want to show each answer type as a column (e.g., "daily active users" as a column header) and some columns are empty because certain metrics are missing from the JSON, first restructure your data to include all required metrics, then render the table.

Step 1: Restructure data in the component #

Define the metrics you expect, then map the JSON data to a structure that includes every metric (even if the value is missing):

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fabric-table',
  templateUrl: './fabric-table.component.html'
})
export class FabricTableComponent implements OnInit {
  // List all metrics you want to display as columns
  requiredMetrics = [
    'daily active users',
    'daily new users',
    'monthly active users'
  ];
  tableRows: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<{ fabricAnswers: any[] }>('/api/fabric-data')
      .subscribe(response => {
        // Group data by platform + appId (assuming you want one row per app/platform)
        const groupedData = response.fabricAnswers.reduce((acc, item) => {
          const key = `${item.platform}-${item.appId}`;
          if (!acc[key]) {
            acc[key] = {
              platform: item.platform,
              appId: item.appId,
              // Initialize all required metrics with default value
              ...this.requiredMetrics.reduce((metrics, metric) => ({
                ...metrics,
                [metric]: 0
              }), {})
            };
          }
          // Override the default value if the metric exists in the JSON
          acc[key][item.answer] = item.answerValue;
          return acc;
        }, {});

        // Convert grouped object to array for *ngFor
        this.tableRows = Object.values(groupedData);
      });
  }
}

Step 2: Render the table with all metric columns #

Now your template will show every required column, with no empty spots—missing metric values use the default 0:

<table class="table">
  <thead>
    <tr>
      <th>Platform</th>
      <th>App ID</th>
      <th *ngFor="let metric of requiredMetrics">{{ metric }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableRows">
      <td>{{ row.platform }}</td>
      <td>{{ row.appId }}</td>
      <td *ngFor="let metric of requiredMetrics">{{ row[metric] }}</td>
    </tr>
  </tbody>
</table>

Either approach should eliminate empty columns in your table. If your specific case is different, feel free to share more details about how you're currently rendering the table!

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