Padding Left не работает должным образом в nz-menu / sub menu (Ng Zorro) - PullRequest
Новая
       43

Padding Left не работает должным образом в nz-menu / sub menu (Ng Zorro)

0 голосов
/ 28 апреля 2020

У меня есть рекурсивный шаблон для отображения меню. Я хочу, чтобы мой вывод был выводом первого кода, но в моем коде каждое подменю (nz-подменю) имеет 24 отступа слева, но это должно быть как в коде ниже (24px для первого подменю -48px для второго подменю et c). Смотрите изображение здесь. Первый - желаемый вывод, а второй - мой вывод 

<ul nz-menu
    nzMode="inline">
  <li nz-submenu
      nzTitle="Navigation Two">
    <ul>
      <li nz-submenu
          nzTitle="Submenu">
        <ul>
          <li nz-menu-item>Option 7</li>
          <li nz-menu-item>Option 8</li>
          <li nz-submenu
              nzTitle="Submenu">
            <ul>
              <li nz-menu-item>Option 9</li>
              <li nz-menu-item>Option 10</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Мой код 

    <ul nz-menu
    nzMode="inline">
  <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: data }"></ng-container>

  <ng-template #recursiveListTmpl
               let-data>
    <ng-container *ngFor="let item of data">
      <li *ngIf="item.children?.length > 0; else menuItem"
          nz-submenu
          [nzTitle]="item.label"
          [nzIcon]="item.icon">
        <ul>
          <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: item.children }"></ng-container>
        </ul>
      </li>

      <ng-template #menuItem>
        <li nz-menu-item>{{ item.label }}</li>
      </ng-template>
    </ng-container>
  </ng-template>
</ul>

Данные: 

data: Menu[] = [
    {
      label: 'Navigation Two',
      children: [
        {
          label: 'Sub Menu',
          children: [

            {
              label: 'Option 7'
            },
            {
              label: 'Option 8'
            },
            {
              label: 'Sub Menu',
              children: [
                {
                  label: 'Option 9'
                }
                , {
                  label: 'Option 10'
                }
              ]
            }
          ]
        }
      ]
    }
  ]
...