Angular表格行统计咨询：总行数及按estate列真假值分类计数

Hey there! Let's walk through exactly how to get the total number of rows in your Angular table (using *ngFor) and count how many rows have the estate value set to true or false. This approach keeps your template clean and your logic organized, plus it's responsive if your data changes dynamically.

1. Handle Statistics in Your Component #

First, we'll calculate all the counts in your component class instead of cluttering up the template. Using getter properties ensures the numbers update automatically whenever your table data changes (like when you load new data from an API or edit rows).

Here's the component code example:

import { Component } from '@angular/core';

// Define an interface for your table rows to enforce type safety
interface TableRow {
  id: number;
  name: string;
  estate: boolean;
  // Add any other fields your rows have here
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Your table data (replace with your actual data source)
  tableData: TableRow[] = [
    { id: 1, name: 'Property A', estate: true },
    { id: 2, name: 'Property B', estate: false },
    { id: 3, name: 'Property C', estate: true },
    { id: 4, name: 'Property D', estate: false },
    { id: 5, name: 'Property E', estate: true }
  ];

  // Get total number of rows
  get totalRowCount(): number {
    return this.tableData.length;
  }

  // Count rows where estate is true
  get estateTrueCount(): number {
    return this.tableData.filter(row => row.estate).length;
  }

  // Count rows where estate is false
  get estateFalseCount(): number {
    return this.tableData.filter(row => !row.estate).length;
  }
}

2. Render the Table & Statistics in Your Template #

Now use *ngFor to render the table rows, and display the pre-calculated statistics above or below the table. This keeps your template focused on presentation, not logic.

Here's the template code:

<!-- Statistics Section -->
<div class="table-stats">
  <p>Total Rows: <strong>{{ totalRowCount }}</strong></p>
  <p>Estate = True: <strong>{{ estateTrueCount }}</strong></p>
  <p>Estate = False: <strong>{{ estateFalseCount }}</strong></p>
</div>

<!-- Table -->
<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>ID</th>
      <th>Property Name</th>
      <th>Estate Status</th>
    </tr>
  </thead>
  <tbody>
    <!-- Use *ngFor to loop through your table data -->
    <tr *ngFor="let row of tableData">
      <td>{{ row.id }}</td>
      <td>{{ row.name }}</td>
      <td>{{ row.estate ? 'Active' : 'Inactive' }}</td>
    </tr>
  </tbody>
</table>

Why This Works #

• Responsive Updates: The getter properties (totalRowCount, estateTrueCount, etc.) recalculate automatically whenever tableData changes, so your stats stay in sync without extra code.
• Clean Separation of Concerns: Logic lives in the component, presentation in the template—this follows Angular best practices and makes your code easier to maintain.
• Type Safety: Using an interface for TableRow helps catch errors early if your data structure changes.

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