根据Angular 7中的选择动态添加列

Question

我目前正在使用 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”，则列是“brand”、“model”、“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

感谢任何输入或相关材料的链接。 谢谢！

Answer 1

//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>;