Angular中在*ngFor外部输出条目总数并用于图表展示

Got it, let's solve this step by step. You already have the *ngFor working to list out your documents with their codes and serial numbers (ending at 8), and now you need to display that total count outside the loop for your single-bar chart. Here's how to make it happen:

1. Calculate the Document Total in Your Component #

First, you'll need to compute the total number of documents directly in your Angular component. Since you're already able to print all the data, you must have a collection (like an array) holding those documents. Use your existing getValue function to fetch that collection, then grab its length for the total count.

Example component code:

import { Component, OnInit } from '@angular/core';
// Make sure objectPath is imported or available in your component

@Component({
  selector: 'app-document-stats',
  templateUrl: './document-stats.component.html'
})
export class DocumentStatsComponent implements OnInit {
  parsedXmlData: any; // Store your parsed XML data here
  documentList: any[] = [];
  totalDocuments: number = 0;

  ngOnInit() {
    // Replace this with your actual XML loading/parsing logic
    this.loadAndParseXml();
  }

  loadAndParseXml() {
    // Simulate parsed XML data (replace with your real data structure)
    this.parsedXmlData = { /* Your XML converted to an object */ };
    // Use getValue to fetch the array of documents (adjust the key to match your XML path)
    this.documentList = this.getValue(this.parsedXmlData, 'your.xml.path.to.documents') || [];
    // Calculate the total count
    this.totalDocuments = this.documentList.length;
  }

  getValue(object: any, key: string) {
    return this.objectPath.get(object, key);
  }
}

2. Display the Total in Your Template #

Now, in your HTML template, use Angular's interpolation to show the total count outside the *ngFor loop. This value will be ready to plug into your chart component.

Example template:

<!-- Existing *ngFor loop to display individual documents -->
<div *ngFor="let doc of documentList; let serial = index">
  编码: {{ doc.code }}，序号: {{ serial + 1 }}
</div>

<!-- Total count displayed outside the loop (ready for your chart) -->
<div class="total-count">
  文档总数: <strong>{{ totalDocuments }}</strong>
</div>

<!-- Example single-bar chart (replace with your actual chart library code) -->
<div class="single-bar-chart">
  <div class="bar" [style.height.%]="totalDocuments * 12.5"></div>
  <span class="chart-label">总数: {{ totalDocuments }}</span>
</div>

Quick Edge Case Tips #

• If your XML data loads asynchronously (like via an API call), handle the initial empty state with {{ totalDocuments || 0 }} to avoid showing undefined.
• If the document list ever updates (e.g., new docs added), re-calculate totalDocuments by running this.totalDocuments = this.documentList.length whenever the data changes.

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