Блог

Я создал простой браузер файлов JavaScript, который отображает содержимое каждого каталога, загружая содержимое подкаталога из бэкэнда с помощью AJAX-запроса при нажатии на имя каталога. О загрузке полного дерева не может быть и речи. Содержимое каталога отправляется в формате JSON. Каталог чем-то похож на приведенный ниже и не может быть загружен рекурсивно целиком из-за количества каталогов и файлов. (Воображаемая) структура каталогов проста, но она может иметь несколько вложенных уровней:

 docs
    assemblies
       2019-07
           doc-6811.txt
           instructions-6811.pdf
        2019-08
           doc-7012.txt
           instructions-7012.pdf
    ...
    invoices
       2019-07
           invoice-6811.pdf
       2019-0
           invoice-7012.pdf
    tickets
        2019-07
            ticket-98141.txt
 

Элементы для каждого каталога находятся в массиве объектов JS:

 [{
   name: '2019-07',
   isDirectory: true,
   fullPath: "/mnt/samba/docs/assemblies/2019-07"       
},
{
   name: '2019-08',
   isDirectory: true,
   fullPath: "/mnt/samba/docs/assemblies/2019-08"
} ...
]  
 

Конечно, есть и файлы, но они не являются проблемой. Теперь мне нужно сделать то же самое в Ionic, но я полностью потерялся с отправной точкой. Верхний каталог хорошо отображается, и текущий простой шаблон (я называю его шаблоном) выглядит примерно так:

 <ion-content>
    <ion-list>
        <ion-item-sliding *ngFor="let d of directories">
        <ion-item (click)="openFolder(d)">  <!-- just an example call --->
            <ion-icon name="folder"      slot="start" *ngIf="d.isdirectory"></ion-icon>
            <ion-icon name="triangle"    slot="start" *ngIf="!d.isdirectory"></ion-icon>
            <ion-label text-wrap>
            {{ d.name }}
            <p>{{ d.fullPath }}</p>
            </ion-label>
            
            <!-- THIS is where the directory contents should appear using 
                the same structure as this template -->
            
        </ion-item>

        </ion-item-sliding>
    </ion-list>
</ion-content>
 

Что должен делать код, так это просто извлекать данные из бэкэнда и привязывать их к переменной массива, которая затем будет отображена ниже в указанном выше месте. Можно ли это сделать в Angular или использовать какой-то другой фреймворк проще? Я предполагаю, что существует какой-то компонентный подход, но он должен быть полностью динамичным, и для каждого запроса должна выполняться выборка плюс рендеринг одного каталога.

Извлечение каталогов-простая задача, и я получаю массив просто отлично. Однако мне пока не удалось выполнить какой-либо рендеринг. Любые альтернативы и/или указатели приветствуются.

Ваш JSON должен быть рекурсивным JSON. Под этим я подразумеваю,

 { "items": [
    {
      "name": "ABC1",
      "isDirectory": true,
      "fullPath": "/mnt/samba/docs/assemblies/2019-07",
      "children":[
        {
          "name": "ABC11",
          "isDirectory": true,
          "fullPath": "/mnt/samba/docs/assemblies/2019-08"
        }, 
        {
          "name": "ABC12",
          "isDirectory": true,
          "fullPath": "/mnt/samba/docs/assemblies/2019-08"
        }
      ]  
    },
    {
      "name": "ABC2",
      "isDirectory": true,
      "fullPath": "/mnt/samba/docs/assemblies/2019-08"
    }
  ] 
}
 

Если это возможно, вы можете сделать то же самое, используя рекурсивный ng-шаблон
Пример того же самого приведен по этой ссылке.

Нажмите здесь, чтобы просмотреть ссылку.

Немного Google по рекурсивному ng-шаблону также может помочь. 🙂

Я искренне надеюсь, что это поможет.