Angular 8中获取*ngFor对象数量并实现状态列按需显示

Hey there! Let's fix those two issues you're facing with your Angular table. The main problem with your ellipsis logic is that you're using the row index (i) instead of checking the length of the Status array for each row. Let's break this down step by step.

1. How to get the length of the object array in *ngFor #

You don't need any fancy tricks here—Angular lets you directly access the length of the array using row.Status.length in your template. This gives you the exact number of objects in the Status array for each row, which is exactly what we need for the ellipsis logic.

2. Fixing the ellipsis display logic #

Your current code shows the ellipsis based on the row index (i < 2), which is why it's showing for rows even when Status has fewer than 2 items. We need to replace that condition with a check on the array length.

Here's the corrected code for your template and a quick tweak to the TS file for clarity:

Updated home.component.html

<table class="table border">
  <thead>
    <tr>
      <ng-container *ngFor="let column of columns; let i = index">
        <th>{{ column }}</th>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of groups; let rowIndex = index"> <!-- Renamed index for clarity -->
      <td>{{row.name}}</td>
      <td>{{row.items}}</td>
      <td>
        <!-- Display first 2 status items -->
        <span class="status" *ngFor="let item of row.Status | slice:0:2; let j = index">
          {{item.name}}{{j < 1 ? ', ' : ''}} <!-- Add comma separator between items -->
        </span>
        <!-- Show ellipsis ONLY if Status has more than 2 items -->
        <span *ngIf="row.Status.length > 2" class="dots" 
              (mouseenter)="onHover(rowIndex)" 
              (mouseleave)="onHover(-1)">
          .....
        </span>
        <!-- Show full status list on hover -->
        <span *ngIf="hoverIndex === rowIndex" class="hover-details">
          <span *ngFor="let item of row.Status; let j = index">
            {{item.name}}{{j < row.Status.length - 1 ? ', ' : ''}} <!-- Add separators for all items -->
          </span>
        </span>
      </td>
    </tr>
  </tbody>
</table>

home.component.ts (minor clarity adjustments)

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  hoverIndex: number = -1;
  groups: any;
  columns = ["name", "Items","status"];

  constructor(private formBuilder: FormBuilder) { }

  onHover(index: number){
    this.hoverIndex = index;
  }

  ngOnInit() {
    this.groups=[
      {"id":1,"name":"pencils","items":"red pencil","Status":[{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}],"loc":[{"id":1,"name":"loc 1"},{"id":2,"name":"loc 2"},{"id":3,"name":"loc 3"}]},
      {"id":2,"name":"rubbers","items":"big rubber","Status":[{"id":1,"name":"green"},{"id":2,"name":"red"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]},
      {"id":3,"name":"rubbers1","items":"big rubber1","Status":[{"id":1,"name":"green"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]}
    ];
  }
}

Key changes explained: #

• Ellipsis condition: Replaced *ngIf = "i < 2" with *ngIf="row.Status.length > 2"—now the ellipsis only appears when there are more than 2 status items to hide.
• Index clarity: Renamed the row index variable from i to rowIndex to avoid confusion with the status item index (j).
• Cleaner display: Added simple comma separators between status items to improve readability (you can adjust this to match your styling needs).
• Hover logic stays intact: The onHover function still tracks the active row index, so the full status list only shows for the row you're hovering over.

You can add custom CSS to style the hover-details class (like a light background and padding) to make the hover view more user-friendly, but that's optional based on your design requirements.

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