KendoUI树列表多列标头 - 动态组标题

Question

我希望它像这个图像一样

，但我遇到的问题是 *ngfor只是给了我一个额外的行，它是否满足了我的需求

我在这里面临着巨大的挑战，因为我似乎需要将组件本身与数组的元素一样多，然后在内部放置与从后端接收到的数据匹配的列（在我的示例中，大小是我想要的密钥显示） 检查此链接：

https：//stackblitz.com/edit/angular-wqcaqmfg-544nabjy？file = src％2fapp％2fapp％2fapp.component.ts

任何帮助都非常感谢

看起来像这样：

  @for(item of groups;let index = $index;track index;) {
    <kendo-treelist-column-group [title]="item.title"  [width]="200">
    @for(item of groups2.slice(index, index+1); track $index) {
      <kendo-treelist-column-group [title]="item.title" [width]="200">
        <kendo-treelist-column field="type" title="Size" [width]="200">
        </kendo-treelist-column>
      </kendo-treelist-column-group>
    }
    </kendo-treelist-column-group>
  }

Answer 1

我们循环一次，然后为Treelist创建组，然后创建一个内部循环并再次重新创建。

您正在使用

angular 18

我提供了

@for

语法

Full代码：

import { Component } from '@angular/core';
import { SortDescriptor } from '@progress/kendo-data-query';
import { filesystem, Entry } from './filesystem';
import { fileIcon, folderIcon, SVGIcon } from '@progress/kendo-svg-icons';

@Component({
  selector: 'my-app',
  template: `
    <kendo-treelist
      kendoTreeListExpandable
      [kendoTreeListHierarchyBinding]="data"
      childrenField="contents"
      [height]="400"
    >
      <kendo-treelist-column
        [expandable]="true"
        field="name"
        title="Name"
        [locked]="true"
        [width]="150"
      >
        <ng-template kendoTreeListCellTemplate let-dataItem>
          <kendo-svgicon
            [icon]="folderSVG"
            *ngIf="dataItem.type === 'directory'"
          ></kendo-svgicon>
          <kendo-svgicon
            [icon]="fileSVG"
            *ngIf="dataItem.type === 'file'"
          ></kendo-svgicon>
          {{ dataItem.name }}
        </ng-template>
      </kendo-treelist-column>
      @for(item of groups;let index = $index;track index;) {
        <kendo-treelist-column-group [title]="item.title"  [width]="200">
        @for(item of groups2.slice(index, index+1); track $index) {
          <kendo-treelist-column-group [title]="item.title" [width]="200">
            <kendo-treelist-column field="type" title="Size" [width]="200">
            </kendo-treelist-column>
          </kendo-treelist-column-group>
        }
        </kendo-treelist-column-group>
      }
    </kendo-treelist>
  `,
})
export class AppComponent {
  public data: Entry[] = filesystem;
  public folderSVG: SVGIcon = folderIcon;
  public fileSVG: SVGIcon = fileIcon;

  public sort: SortDescriptor[] = [
    {
      field: 'type',
      dir: 'asc',
    },
    {
      field: 'name',
      dir: 'asc',
    },
  ];

  public groups2 = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 2',
      width: 100,
    },
  ];

  public groups = [
    {
      title: 'group 1',
      width: 100,
    },
    {
      title: 'group 2',
      width: 100,
    },
  ];

  public headerGroups = [
    {
      title: '15 oct',
      width: 100,
      children: [],
    },
    {
      title: 'Prior Period',
      width: 100,
      children: [
        {
          title: '20 oct',
          width: 100,
        },
      ],
    },
  ];

  public headerGroups1 = {
    title: 'root',
    width: 100,
    children: [
      {
        title: 'Prior Period',
        width: 100,
        children: [
          {
            title: '20 oct',
            width: 100,
          },
          {
            title: '30 oct',
            width: 100,
          },
        ],
      },
    ],
  };
}

stackblitzdemo