如何让Angular组件中ul/li树形列表默认展开（至少一级）

看起来你已经搭好了树形视图的基础结构，要实现第一层级默认展开其实不难，核心就是在初始化节点数据时把第一层级的展开状态设为true，再配合模板里的显示逻辑就行，我给你一步步拆解：

1. 初始化节点的展开状态 #

在你的组件TypeScript文件里，当拿到contentNodes数据后（比如在ngOnInit或者数据请求回调里），遍历第一层级节点，给它们初始化展开状态。如果你的节点数据本身没有控制展开的字段，一定要先补上，避免模板报错：

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

@Component({
  // 你的组件元数据
})
export class TreeComponent implements OnInit {
  contentNodes: any[] = []; // 存储树形节点数据

  ngOnInit(): void {
    // 模拟数据加载，替换成你实际的接口请求或数据初始化逻辑
    this.getTreeData().then(nodes => {
      this.contentNodes = nodes;
      // 给第一层级节点设置默认展开
      this.contentNodes.forEach(node => {
        node.toggle = true;
        // 如果想要递归展开所有层级，就调用下面这个辅助函数
        // this.expandAllNodes(node);
      });
    });
  }

  // 可选：递归展开所有子节点的函数
  private expandAllNodes(node: any): void {
    if (node.has_children) {
      node.toggle = true;
      // 递归处理子节点
      node.children?.forEach((child: any) => this.expandAllNodes(child));
    }
  }

  private getTreeData(): Promise<any[]> {
    // 模拟后端返回的树形结构数据
    return Promise.resolve([
      { name: '父节点1', has_children: true, children: [{ name: '子节点1-1', has_children: false }] },
      { name: '父节点2', has_children: true, children: [{ name: '子节点2-1', has_children: true, children: [{ name: '孙节点2-1-1', has_children: false }] }] },
      { name: '父节点3', has_children: false }
    ]);
  }
}

2. 调整模板的显示逻辑 #

你原来模板里ul标签的Isexpanded:true是无效属性，直接删掉就行。要让子节点列表根据节点的toggle状态显示/隐藏，同时完善递归渲染多层子节点的逻辑：

<ul style="list-style: none;">
  <li *ngFor="let contentNode of contentNodes" 
      class="tree__branch" 
      [ngClass]="{'tree__branch--has-children': contentNode.has_children}">
    <!-- 展开/折叠切换按钮（仅当节点有子节点时显示） -->
    <a *ngIf="contentNode.has_children" (click)="contentNode.toggle = !contentNode.toggle">
      {{ contentNode.toggle ? '▼' : '▶' }}
    </a>
    <!-- 节点内容 -->
    <span>{{ contentNode.name }}</span>
    <!-- 子节点列表：只有节点有子节点且toggle为true时才显示 -->
    <ul *ngIf="contentNode.has_children && contentNode.toggle" 
        style="list-style: none; padding-left: 20px;">
      <!-- 用ng-template递归渲染子节点，避免重复代码 -->
      <ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: contentNode.children }"></ng-container>
    </ul>
  </li>
</ul>

<!-- 定义递归模板，复用树形节点结构 -->
<ng-template #treeNodeTemplate let-nodes>
  <li *ngFor="let node of nodes" 
      class="tree__branch" 
      [ngClass]="{'tree__branch--has-children': node.has_children}">
    <a *ngIf="node.has_children" (click)="node.toggle = !node.toggle">
      {{ node.toggle ? '▼' : '▶' }}
    </a>
    <span>{{ node.name }}</span>
    <ul *ngIf="node.has_children && node.toggle" 
        style="list-style: none; padding-left: 20px;">
      <ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node.children }"></ng-container>
    </ul>
  </li>
</ng-template>

3. 小细节提示 #

• 如果你的节点数据里原本就有类似isExpanded的字段，直接替换成你的字段名就行，不用非要叫toggle。
• 可以给展开/折叠按钮加一些CSS样式，比如hover效果、过渡动画，让交互更流畅自然。

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