#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-разметки Реактивные преобразования могут быть сделаны возможными, например, обработка события на основе времени отмены Обработка событий, когда компоненты различныдо изменения Добавление элементов динамически упрощает модульное тестирование