如何在Angular的*ngIf指令中传入HTML模板#childs并检查长度？

Hey Greg, let's break down how to make this work! You're already halfway there with your #childs template reference—Angular lets you use these references directly in your template, including within *ngIf directives, as long as you keep a few context rules in mind.

Option 1: Use the Template Reference Directly in the Template #

The #childs reference points to the MatSelectionList component instance, which has handy properties to access the list's content. To check the total number of items in the list, use childs.options.length (since options is a QueryList of all the <mat-list-option> elements). If you need to check selected items instead, use childs.selectedOptions.selected.length.

Here's how to implement this in your template:

<!-- Your existing selection list -->
<mat-selection-list #childs>
  <mat-list-option *ngFor="let child of ELEMENT_DATA">
    <span (click)="assignChild(child)">{{ child.firstName }}&nbsp;{{ child.lastName }}</span>
  </mat-list-option>
</mat-selection-list>

<!-- Example 1: Show message if list is empty -->
<div *ngIf="childs.options.length === 0">
  No children found in the list.
</div>

<!-- Example 2: Show selected count if any items are selected -->
<div *ngIf="childs.selectedOptions.selected.length > 0">
  You've selected {{ childs.selectedOptions.selected.length }} child(ren).
</div>

Important Note: Make sure the *ngIf element comes after the <mat-selection-list> in your template. If you try to use #childs in an *ngIf that wraps the list (like a parent container), the reference won't exist yet when Angular evaluates the condition, leading to an error.

Option 2: Access the Reference via Component Class with @ViewChild #

If you need more flexibility (like using the list state in component logic or referencing it in a parent container's *ngIf), you can use @ViewChild to inject the MatSelectionList instance into your component class.

First, update your component:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';

@Component({
  // Your component metadata (selector, templateUrl, etc.)
})
export class YourComponent implements AfterViewInit {
  @ViewChild('childs') childList!: MatSelectionList;
  hasChildren = false;

  ngAfterViewInit(): void {
    // Update the flag when the list initializes
    this.hasChildren = this.childList.options.length > 0;
    
    // Optional: Subscribe to changes if your ELEMENT_DATA updates dynamically
    this.childList.options.changes.subscribe(() => {
      this.hasChildren = this.childList.options.length > 0;
    });
  }
}

Then use the component property in your template:

<!-- Now you can use the component property in *ngIf, even before the list if needed -->
<div *ngIf="hasChildren">
  <mat-selection-list #childs>
    <mat-list-option *ngFor="let child of ELEMENT_DATA">
      <span (click)="assignChild(child)">{{ child.firstName }}&nbsp;{{ child.lastName }}</span>
    </mat-list-option>
  </mat-selection-list>
</div>

This approach is great if your data changes dynamically, as you can subscribe to the options.changes observable to keep your component state in sync with the list.

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