Angular 在同一页面中多次使用相同的组件

我开始变得有棱角。 我用数据创建了一个API。这些数据是这样排序的

对于每个“机构”，n个“培训”。 对于每个“培训”，n个“组”。 我用服务请求我的API

因此，在我想在扩展面板中显示的页面中： 以培训为标题，并列出相关的组

在代码中我有“training view.component”显示n个培训，在这个培训中，我放了n个“group view.component”

假设我有3次培训，我的网站将显示3次sames小组培训（图片更清晰）：

我试过这个： 但“唯一id”不是解决方案。 也许我不能在同一个页面中使用相同的组件，但当我使用“ngFor”时，它就可以工作了

所有代码都是代码的一部分。 列车视图.components.ts：

@Component({
selector: 'app-training-view',
templateUrl: './training-view.component.html',
styleUrls: ['./training-view.component.css']
})
export class TrainingViewComponent implements OnInit {

trainings: Training[];
trainingSubscription: Subscription;
[...]

ngOnInit() {

this.trainingSubscription = this.TrainingService.trainingsSubject.subscribe(
  (groups: any[]) => {
    this.trainings = groups;
  }
);
this.TrainingService.emitTrainingsSubject();

this.onFetch();
}

训练视图html

<mat-accordion>
    <mat-expansion-panel *ngFor="let training of trainings">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{training.name}}
        </mat-panel-title>
        <mat-panel-description>
          Liste des groupes
        </mat-panel-description>
      </mat-expansion-panel-header>
      <app-group-view
        [idTraining]="training.id"
        [id]="id" 
      ></app-group-view>

      </mat-form-field>
    </mat-expansion-panel>
  </mat-accordion>

html:

<app-groups *ngFor="let group of groups;let i = index" 
                [groupName]="group.name"
                [groupFormation]="group.training_name"
                [index]="i"
                [idGroup]="group.id"
                [id]="id" 
                >
    </app-groups>

我希望你能理解我的问题，谢谢你的帮助
托马斯

更新
我尝试了@Gérôme Grignon的解决方案

培训：

<mat-accordion>
    <mat-expansion-panel *ngFor="let training of trainings">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{training.name}}
            </mat-panel-title>
            <mat-panel-description>
              Liste des groupes
            </mat-panel-description>
        </mat-expansion-panel-header>
        <app-group-view
          [idTraining]="training.id"
          [id]="id" 
        ></app-group-view>


    </mat-expansion-panel>
</mat-accordion>


{{training.name}
团体名单
Thnaks you@Gérôme Grignon
通过删除主题和订阅组件简化与服务的通信。
然后迭代groups变量

服务：

getGroupsByTraining(id) {
// ...
return this.httpClient.get(url); }

组视图组件：

groups;
@Input() idTraining: number;

ngOnInit() {
this.service.getGroupsByTraining(idTraining).subscribe(data => this.groups = data); }

正如您所说，它与*ngFor一起工作，是否仍然存在问题？在图中，有4个“培训”（扩展面板的标题）您是否使用idTraining在应用程序组视图中基于此id发出http请求以获取数据并使用此数据初始化“组”？（例如，this.service.getTrainingById（id）.subcribe（data=>this.groups=data）位于“onFetch”方法中：this.GroupService.getGroupsFromServer（this.idTraining）；我调用一个发出http请求的方法。实际上，如果我使用“console.log”来显示组的所有id，我就可以检索到正确的数据。就好像所有“group view”的实例都共享它的变量一样。你能发布app group view的ts文件吗？告诉我我是否正确：你根据id获取数据，将这些数据放入主题中，然后订阅主题以获取组吗？在API中：获取培训：XX.fr/Trainings:return json[{id:1，name:“premiere anne”}，{id:2，name:“deuxieme annee”}]/\\/\\\\/\\\\\\\\\\\\\/\\\\\\\\\要获取培训组id 1:XX.fr/Trainings/1/Groups:return json[{id，name，training\u id}，…]这些请求是get请求，我使用“this.httpClient.get（url）.订阅（（响应）=>{}）；”，所以在“培训视图”中我获取培训，对于每个培训，我都会显示一个“应用程序组视图”“组视图”组件将请求组列表的API（第二次请求）。
 <li class="list-group-item" *ngFor="let group of groups">
          <h4>{{ group.training_name }} groupe {{ group.name }} </h4> 
        </li>

getGroupsByTraining(id) {
// ...
return this.httpClient.get(url); }

groups;
@Input() idTraining: number;

ngOnInit() {
this.service.getGroupsByTraining(idTraining).subscribe(data => this.groups = data); }