Angular 5嵌套动态子分类显示异常求助

Hey there! Let's work through those two bugs you're facing with parent-child category display—last subcategory showing above the parent, and duplicate <ul> tags for subcategories. I'll break down common causes and fixes based on typical Angular template/data patterns.

Issue 1: Last Subcategory Appears Above Parent Category #

This almost always boils down to render order or layout logic:

• Check your *ngFor traversal: If you're using a reverse pipe on your subcategory loop, that'll flip the order. Remove it to keep subcategories in the sequence your backend returns (or sort them explicitly if needed).
• Inspect CSS layouts: If your parent/subcategory container uses flex-direction: column-reverse, or subcategory items have float properties without proper clearfix, it can mess up vertical order. Try adding explicit layout rules, like:

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  

• Verify data sorting: If Django Rest is returning subcategories in reverse order, sort them in your Angular component before rendering:

  // When mapping parent categories to their children
  parent.children = parent.children.sort((a, b) => a.id - b.id);
  

Issue 2: Duplicate <ul> Tags for Subcategories #

Duplicate elements usually stem from template structure mistakes or duplicate data:

• Audit your template structure: It's easy to accidentally nest an extra <ul> around your subcategory loop. For example, this is a common mistake:

  <!-- ❌ Wrong: Extra outer ul causes duplication -->
  <ul>
    <li *ngFor="let parent of datas">
      {{ parent.title }}
      <ul *ngFor="let sub of parent.children">
        <li>{{ sub.title }}</li>
      </ul>
    </li>
  </ul>
  

  Replace it with a structure that only renders one <ul> per parent category:

  <!-- ✅ Correct: One subcategory ul per parent -->
  <ul class="parent-categories">
    <li 
      *ngFor="let parent of datas"
      (mouseenter)="hoveredCategory = parent"
      (mouseleave)="hoveredCategory = null"
    >
      {{ parent.title }}
      <!-- Only render subcategories when hovering the parent -->
      <ul *ngIf="hoveredCategory === parent" class="subcategories">
        <li *ngFor="let sub of parent.children">{{ sub.title }}</li>
      </ul>
    </li>
  </ul>
  

• Check for duplicate data: Run console.log(this.datas) in ngOnInit to make sure your parent category array doesn't have duplicate entries, and that each parent's children array isn't being populated twice (e.g., accidental duplicate API calls or data processing).
• Validate hover event logic: If you've bound both mouseenter and mouseover events to set hoveredCategory, that can trigger duplicate state updates and cause extra renders. Stick to just mouseenter and mouseleave.

Quick Data Structure Tip #

If your Django Rest API returns flat category data (not nested), make sure you're converting it to a tree structure in your component first—this avoids rendering issues:

ngOnInit() {
  // Example flat data from Django Rest
  const flatCategories = [
    { id: 12, parent_id: null, title: 'Parent Category' },
    { id: 13, parent_id: 12, title: 'Subcategory 1' },
    { id: 14, parent_id: 12, title: 'Subcategory 2' }
  ];

  // Convert to nested tree structure
  this.datas = flatCategories
    .filter(cat => cat.parent_id === null)
    .map(parent => ({
      ...parent,
      children: flatCategories.filter(cat => cat.parent_id === parent.id)
    }));
}

Give these fixes a try—they should resolve both issues! If you're still stuck, sharing your full template code would help narrow things down further.

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