Добавить столбцы динамически на основе выбора в Angular 7 - PullRequest
Новая
       5

Добавить столбцы динамически на основе выбора в Angular 7

0 голосов
/ 07 января 2020

В настоящее время я работаю над мини-проектом в Angular 7.

Мне нужна таблица или сводная таблица, которая может динамически отображать столбцы на основе предыдущего выбора фильтров.

Это пример фильтра: 

brands = [
    { id: 1, brand: 'Audi' },
    { id: 2, brand: 'BMW' },
    { id: 3, brand: 'Benz' }
    ]

Это фиктивный массив данных: 

car_data = [
    { brand: 'Audi', model: 'Q3', fuel_eff: 12.5, fuel_tank: 65 },
    { brand: 'Audi', model: 'R8', fuel_eff: 6.0, fuel_tank: 60 },
    { brand: 'Audi', model: 'A4', fuel_eff: 13.0, fuel_tank: 65 },
    { brand: 'BMW', model: 'M3', fuel_eff: 9.0, fuel_tank: 65 },
    { brand: 'BMW', model: '740i', fuel_eff: 13, fuel_tank: 75 },
    { brand: 'BMW', model: '320i', fuel_eff: 14, fuel_tank: 65 },
    { brand: 'Benz', model: 'CLA', fuel_eff: 12.0, fuel_tank: 65 },
    { brand: 'Benz', model: 'GLA', fuel_eff: 14.0, fuel_tank: 65 },
    { brand: 'Benz', model: 'S350L', fuel_eff: 12.0, fuel_tank: 85 },
    { brand: 'Benz', model: 'S500L', fuel_eff: 12.0, fuel_tank: 85 }
    ]

Чего я достиг в настоящее время: у меня есть панель, которая показывает все данные, и пользователь должен выбрать бренды, которые он / она хочет видеть. Затем данные будут отфильтрованы и соответственно отображены на приборной панели. Мне удалось отфильтровать данные на основе одного и нескольких вариантов выбора.

Моя текущая задача заключается в том, как динамически добавлять дополнительные столбцы для каждого бренда? Например, если я выбрал «BMW», столбцы «бренд», «модель», «fuel_eff», «fuel_tank». Теперь, если я выбрал «BMW» и «Audi», я хочу увидеть последние 3 столбца выше для КАЖДОГО бренда. Может быть что-то вроде: 

BMW                            AUDI
model  fuel_eff  fuel_tank     model   fuel_eff   fuel_tank
M3     9.0       65            A4      13.0       60

Я создал пример приложения с неполными данными - https://stackblitz.com/edit/angular-zkhdnc

Оцените любые входные данные или ссылки на соответствующие материалы , Спасибо!

1 Ответ

0 голосов
/ 07 января 2020 
//HTML
  <ng-container>
    <ng-container *ngTemplateOutlet="TemplateName;context:{modelsArray: modelsArray}"></ng-container>
  </ng-container>
<ng-template #SingleBrand let-modelsArray="modelsArray">
  <div>Single Brand HTML</div>
</ng-template>
<ng-template #MultiBrand let-modelsArray="modelsArray">
  <div>Multi Brand HTML</div>    
</ng-template>

//TS
@ViewChild(SingleBrand, { static: true }) SingleBrand: TemplateRef<any>;
@ViewChild(MultiBrand , { static: true }) MultiBrand : TemplateRef<any>;
...