Angular 2+ - древовидная таблица с использованием API - PullRequest
Новая
       33

Angular 2+ - древовидная таблица с использованием API

1 голос
/ 06 февраля 2020

У меня есть три Apis для категорий, подкатегорий и политик.

Например:

"https://restapi.com/project".

1. Категория 

In the case of category, I have to pass the body(raw data) as above json for the above Api

      {
        "startIndex":"1",
        "count":"150",
        "groupBy":"category",
        "searchTerm":"PROJECT:project1"
        }

Ответ API : Перечислены все категории 

{ "data":
  [
   {
    projectName:null,
    categoryName: category1,
    subCategoryName:null,
    controlName:null
   },
   {
    projectName:null,
    categoryName: category2,
    subCategoryName:null,
    controlName:null
   }
  so on....
  ]
}

2. подкатегория 

In the case of sub-category, I have to pass the body(raw data) as above json for the above Api

      {
        "startIndex":"1",
        "count":"150",
        "groupBy":"subcategory",
        "searchTerm":"PROJECT:projectName1,CATEGORY: category1"
        }

Api Response : Перечислены все подкатегории категории 1 (поскольку мы предоставляем searchTerm по categoryName) 

{ "data":
  [
   {
    projectName:null,
    categoryName: null,
    subCategoryName: subcategory1,
    controlName:null
   },
   {
    projectName:null,
    categoryName: null,
    subCategoryName: subcategory2,
    controlName:null
   }
  so on....
  ]
}

2 . Control 

In the case of control, I have to pass the body(raw data) as above json for the above Api

      {
        "startIndex":"1",
        "count":"150",
        "groupBy":"subcategory",
        "searchTerm":"PROJECT:projectName1,SUB-CATEGORY: subcategory1"
        }

Api Response : перечислены все элементы управления подкатегории1 (потому что мы предоставляем searchTerm по имени подкатегории) 

{ "data":
  [
   {
    projectName:null,
    categoryName: null,
    subCategoryName: null,
    controlName: control1
   },
   {
    projectName:null,
    categoryName: null,
    subCategoryName: null,
    controlName: control2
   }
  so on....
  ]
}

Когда я открываю 1-ую политику и после этого я открываю следующую. Но категории второй политики автоматически обновляются в первой политике.

Для вызова этих Apis я использовал три метода get для getCategory (), getSubcategory (), getControl ().

Я пример прикрепления stackblitz ..

В stackBlitz я использовал три метода (например, метод, который я использовал)

ie,

open (i) ====> Я беру индекс, я значение для принятия значений политики (но в моем API, мне нужно отправить categoryName, чтобы получить подкатегорию)

subOpen (i) ====> Я беру индекс, значение j для получения значения подкатегории (но в моем Api я должен отправить подкатегорию, чтобы получить элементы управления)

Здесь https://stackblitz.com/edit/angular-9q4fbn?file=src%2Fapp%2Fapp.component.html.

Подскажите, пожалуйста, как решить эту проблему ??

1 Ответ

0 голосов
/ 06 февраля 2020

Ваши данные уже структурированы таким образом, что имеет смысл связать их с вашим представлением. Нет необходимости в микроуправлении ссылками на части вашего дерева данных.

Логическая проблема, с которой вы столкнулись, заключается в том, что, даже если вы зацикливались на категориях в своем дереве, вы привязывались к одной и той же ссылке на подкатегории. Обновление ссылки на dropdownData1 или dropdownData2 изменяет отображение для всех категорий.

На самом деле гораздо проще делать то, что вы хотите. Просто используйте существующую структуру данных как есть.

https://stackblitz.com/edit/angular-dpziva

Вот новое представление: 

<ng-container *ngFor='let policy of dropdownData'>
  <tr>
    <td (click)="policy.expand = !policy.expand">
      <span class="{{policy.expand ?'fa fa-angle-down':'fa fa-angle-right'}}"></span>
      <span>{{policy.name}}</span>
    </td>
    <td class="text-center">
      <span class="label success">{{policy.policyName}}</span>
    </td>
  </tr>
  <ng-container *ngIf="policy.expand && policy.categories && policy.categories.length">
    <ng-container *ngFor='let category of policy.categories'>
      <tr>
        <td (click)="category.expand = !category.expand">
          <span style="margin-left: 20px;" class="{{category.expand ?'fa fa-angle-down':'fa fa-angle-right'}}"></span>
          <span>{{category.name}}</span>
        </td>
        <td class="text-center">
          <span class="label success">{{category.categoryName}}</span>
        </td>
      </tr>
      <ng-container *ngIf="category.expand && category.subCategories && category.subCategories.length">
        <ng-container *ngFor='let subcategory of category.subCategories'>
          <tr>
            <td (click)="subcategory.expand = !subcategory.expand">
              <span style="margin-left: 40px;" class="{{subcategory.expand ?'fa fa-angle-down':'fa fa-angle-right'}"></span>
              <span>{{subcategory.name}}</span>
            </td>
            <td class="text-center">
              <span class="label success">{{subcategory.subCategoryName}}</span>
            </td>
          </tr>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-container>
</ng-container>

Вот новый класс компонентов : 

export class AppComponent {
  name = "Angular";
  dropdownData: any;

  data = {
    policy: [
      {
        policyName: "a1",
        name: "policy 1.1",
        expand: false,
        categories: [
          {
            categoryName: "c1",
            name: "category 1.1",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s1",
                name: "subCategory 1.1"
              },
              {
                subCategoryName: "s2",
                name: "subCategory 1.2"
              }
            ]
          },
          {
            categoryName: "c2",
            name: "category 1.2",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s5",
                name: "subCategory 2.1"
              },
              {
                subCategoryName: "s6",
                name: "subCategory 2.2"
              }
            ]
          }
        ]
      },
      {
        policyName: "a2",
        name: "policy 1.2",
        expand: false,
        categories: [
          {
            categoryName: "c4",
            name: "category 1.1",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s13",
                name: "subCategory 1.1"
              }
            ]
          },
          {
            categoryName: "c5",
            name: "category 1.2",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s17",
                name: "subCategory 2.1"
              },
              {
                subCategoryName: "s18",
                name: "subCategory 2.2"
              }
            ]
          },
          {
            categoryName: "c6",
            name: "category 1.3",
            expand: false,
            subCategories: [
              {
                subCategoryName: "s21",
                name: "subCategory 3.1"
              }
            ]
          }
        ]
      }
    ]
  };

  ngOnInit() {
    this.dropdownData = this.data.policy;
    console.log("dataas", this.dropdownData);
  }

  expand(collection, expandedItem) {
    collection.forEach(item => item.expand = item.id === expandedItem.id);
  }
}
...