Как добиться раскрытия родительских и дочерних категорий в angular 7 - PullRequest
Новая
       26

Как добиться раскрытия родительских и дочерних категорий в angular 7

0 голосов
/ 06 марта 2019

Я хочу создать раскрывающийся список категорий на основе шаблона «родитель -> ребенок -> внучка» -> «великий внук» и т. Д.Должны появиться дочерние категории выбранной категории (приходит по вызову http).Точно так же при выборе второго результата раскрытия в третьем с заполненными дочерними категориями града.

Я думал, что есть два способа, но оба имеют недостатки.

Первый способ - иметь список раскрывающегося списка уже на странице.Но для этого нужно иметь только известный уровень категорий.Но у меня может быть неизвестный уровень выпадающего меню.Ниже приведен пример кода, который ограничен двумя раскрывающимися списками. 

populateSubCategory(selectedCountry) {
    this.commonService.getCategories(selectedCategory).subscribe((response) => {
        this.subcategories = response.categories.map((category) => {
            return {id: category.id, name: category.name};
        });

        this.subcategories.unshift({id: "", name: "Select category"});
    });
}


<select (change)="populateCategory($event.target.value)" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.category.errors }" formControlName="category">
  <option *ngFor="let category of categories" [value]="category.id">{{category.name}}</option>
</select>


<select (change)="populateSubSubCategory($event.target.value)" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.subcategory.errors }" formControlName="subcategory">
  <option *ngFor="let subcategory of subcategories" [value]="subcategory.id">{{subcategory.name}}</option>
</select>

Во-вторых, сам Angular предоставляет FormArray, но это будет копировать первый раскрывающийся список, поэтому нет способа настроить данные дочерних категорий в дочерние раскрывающиеся списки. 

categories: FormArray;

ngOnInit() {
    this.productForm = this.formBuilder.group({
            categories: this.formBuilder.array([this.createCategory])
    );
}

createCategory(): FormGroup {
    return this.formBuilder.group({
        category: ['', [Validators.required]]
    });
}

addCategory(): void {
  this.categories = <FormArray>this.productForm.controls.categories
  this.categories.push(this.createCategory());
}

getChildCategories(selectedCategory) {
    this.productService.getCategories(selectedCategory).subscribe((response) => {
        if(response.categories.length > 0) {
            this.category_list = response.data.categories.map((category_row) => {
                return {id: category_row.id, name: category_row.name};
            });

            this.category_list.unshift({id: "", name: "Select Category"});
            // HOW TO Link createCategory with above data ?
            this.createCategory();
        }

    });
}

<div class="col-md-12" formArrayName="categories" *ngFor="let category of productForm.get('categories').controls; let i = index;">
  <div class="form-group" [formGroupName]="i">
    <label class="form-control-label" for="category">Category</label>
    <select id="category" name="category" formControlName="category" class="form-control" (change)="getChildCategories($event.target.value)">
        <option *ngFor="let category_row of category_list" [value]="category_row.id">{{category_row.name}}</option>-->
    </select>
  </div>
</div>
...