группа категорий при использовании управляемых шаблонами и реактивных форм angular 9 единый API в подкатегории category?

#angular

#angular

Вопрос:

я использую angular 9, и у меня есть группа категорий, категория и подкатегория single API в разделе «Как управлять приведенными ниже данными на основе реактивной формы angular checkbox multiple».

Группа категорий и категория, данные подкатегории в одном API

 async getAllCategorySubCategoryAndGroupCategoryDetail(): Promise<CategoryDetails[]> {
    try {
            let categoryGroupQuery = `SELECT shrt_category_groups.id as categoryGroupId, 
                                            shrt_category_groups.category_group_name as categoryGroupName 
                                      FROM shrt_category_groups`;
            let categoryGroupList = await pool.query(categoryGroupQuery);

            if (categoryGroupList.length > 0) {
                    let categoryListQuery = `SELECT shrt_categories.id as categoryId,
                                                  shrt_categories.category_name as categoryName,
                                                  shrt_categories.category_image as categoryImage,
                                                  shrt_categories.category_group_id as categoryGroupId
                                             FROM shrt_categories`;

                    let categoryList = await pool.query(categoryListQuery);
                    let subcategoryQuery = `SELECT shrt_sub_categories.id as subCategoryId,
                                                   shrt_sub_categories.sub_category_name as subCategoryName,
                                                   shrt_sub_categories.category_id as categoryId 
                                            FROM shrt_sub_categories`;

                    let subCategoryList = await pool.query(subcategoryQuery);
                 
                    const getCategory = (categoryGroupId:any) =>{
                      return categoryList.filter((cat:any) => cat.categoryGroupId == categoryGroupId)
                    }
                    
                    const getSubCategory = (categoryId:any) =>{
                      return subCategoryList.filter((subCategory:any) => subCategory.categoryId == categoryId)
                    }
  
                    let mergeData = categoryGroupList.map((catG:any) => {
                      return { ...catG, 
                            category: getCategory(catG.categoryGroupId).map((cat) => {
                              return { ...cat,
                                  subCategory: getSubCategory(cat.categoryId)
                               }
                            })
                      }
                    })
                    return mergeData;
              }else{
                 return categoryGroupList;
            }
        } catch (error) {
          throw error;
        }
  }
 

Комментарии:

1. Функции управляемых шаблонами форм Просты в использовании, подходят для простых сценариев и не работают в сложных сценариях, аналогичных AngularJS Двухсторонняя привязка данных (с использованием синтаксиса [(ngModel)]) Минимальный код компонента Автоматическое отслеживание формы и ее данных (обрабатывается Angular) Модульное тестирование — еще одна проблема

2. Реактивные формы Более гибкие, но требуют много практики Обрабатывают любые сложные сценарии Привязка данных не выполняется (неизменяемая модель данных, предпочитаемая большинством разработчиков) Больше кода компонента и меньше HTML-разметки Реактивные преобразования могут быть сделаны возможными, например, обработка события на основе времени отмены Обработка событий, когда компоненты различныдо изменения Добавление элементов динамически упрощает модульное тестирование