Как заморозить левый столбец в виде дерева вложений с помощью AngularJS - PullRequest
0 голосов
/ 10 января 2020

Я пытаюсь выполнить требования ниже в древовидном представлении, используя AngularJs версия 6: 1. Заморозить первый столбец 2. Заморозить заголовок

Я пробовал использовать подход ниже, но не в состоянии достичь желаемого результата, пожалуйста, помогите.

<div class="container">
    <ng-container *ngFor="let item of items; let itemIndex=index">
        <div class="dropdown-tree-item parent1" *ngIf="!item?.isHidden">
            <ng-container
                *ngIf="(item?.isFolder && item?.children && item?.children.length > 0); else singleItemTemplate">
                <div class="dropdown-tree-items-drop parent2">
                    <a tabindex={{item?.id}} (click)="OpenCloseAction(item)"
                        [ngClass]="item?.isOpen ? 'dropdown-item-down':'dropdown-item-right'">
                        <span tabindex={{item?.id}} class="ring-dropdown-tree-name"
                            (click)="onTreeItemAction(item)">{{item?.text}}</span>
                    </a>
                    <div *ngIf="item?.children && item?.isOpen"
                        class="dropdown-children parent3">
                        <tree-component [tabindex]="item?.id"
                            [isMaxLengthTrue]="isMaxLengthTrue" [setMaxLength]="setMaxLength"
                            [setChildMaxLength]="setChildMaxLength" (action)="onTreeItemAction($event)"
                            [items]="item?.children">
                        </tree-component>
                    </div>
                </div>
              <table-checkbox-component [permissions]="item?.permissions"
                    (checkBoxChange)="onChange($event)" class="dropdown-tree-items-checkbox hidden">
                </table-checkbox-component>
            </ng-container>
            <ng-template #singleItemTemplate>
                <span tabindex={{item?.id}} class="dropdown-tree-name parent-single"
                    (click)="onTreeItemAction(item)">{{item?.text}}</span>
                    <eing-role-customization-table-checkbox-component [permissions]="item?.permissions"
                    (checkBoxChange)="onChange($event)" class="dropdown-tree-items-checkbox hidden">
                </table-checkbox-component>
            </ng-template>
        </div>
    </ng-container>
</div>
...