我有这个sidenav组件代码如下。使用details和summary标记创建。
当点击li标签时，它会给出一个错误，当点击details时，描述就会打开。因此，我想在点击li时进行验证，并将'open'属性添加到details标记中。
但它不起作用，我不知道如何解决这个问题。有人能帮我吗=（
当我尝试使用setAttribute或只是手动设置open属性并阅读它时，会返回以下错误：
页面错误：7643 ERROR Cannot read properties of undefined（阅读'attributes'）core.mjs：7643 ERROR TypeError：setAttribute不是函数

side-nav.html

<div class="side-nav-content">
  <ul class="nav-list" [ngClass]="{ 'nav-list-open': sideNavStatus }">
    <a class="nav-list-item" (click)="sideNavStatus = !sideNavStatus">
      <img src="{{ changeSideNavButton() }}" alt="Menu burguer icon" />
    </a>
    <li
      class="nav-list-item"
      *ngFor="let item of list"
      (click)="onSubMenu($event)"
    >
      <details> //I tried using ng-open but not worked to
        <summary>
          <img
            src="{{ item.menu.icon }}"
            alt="{{ item.menu.name }} menu icon"
            class="item-icon"
          />
          <span class="item-title" [ngClass]="{ 'show-title': sideNavStatus }">
            <a class="item-title-text"
              >{{ item.menu.name }}
              <img
                src="../../../assets/side-menu-icons/arrow-down-svgrepo-com.svg"
                alt="Arrow down Icon"
                class="item-arrow-icon"
                [ngClass]="{ 'sub-menu-open': subMenuStatus }"
              />
            </a>
          </span>
        </summary>
        <div class="sub-menu-content">
          <ul class="sub-list">
            <li
              class="sub-list-item"
              *ngFor="let item of item.menu.subMenuList"
            >
              <img src="{{ item.icon }}" alt="{{ item.name }} menu icon" />
              <span>
                <a href=""
                  >{{ item.name }}
                  <img
                    [ngClass]="{ 'show-arrow': item.subSubMenuList }"
                    src="../../../assets/side-menu-icons/arrow-down-svgrepo-com.svg"
                    alt="Arrow down Icon"
                  />
                </a>
              </span>
            </li>
          </ul>
        </div>
      </details>
    </li>
  </ul>
</div>

侧导航.ts

export class SideMenuComponent {

  @Input() sideNavStatus: boolean = false;
  subMenuStatus: boolean = false;
  subMenuOpen!: boolean;

  list: MenuList[] = [...];

  changeSideNavButton(): string {
    if (this.sideNavStatus) {
      return '../../../assets/side-menu-icons/menu-collapsed-svgrepo-com.svg'
    }else {
      return '../../../assets/side-menu-icons/menu-expand-svgrepo-com.svg'
    }
  }

  onSubMenu(e: any) {
    console.log(e);
    e.target.children.setAttribute('open'); //this is not worked too
  }
}