Я начинаю развиваться с Angular.Я создал API с данными.Эти данные упорядочены следующим образом:
для каждого «Учреждения», n «Тренингов».для каждой «Тренировки», n «Группы».Я запрашиваю мой API с сервисом.
Итак, на странице, которую я хотел бы показать на панели расширения: https://material.angular.io/components/expansion/overview Обучение в качестве заголовка и связанного списка групп.
В коде, который у меня есть "training-view.component "кто показывает n Обучение и в этих тренингах, я ставлю n" group-view.component ".
Предположим, у меня есть 3 тренинга, мой сайт покажет 3 тренинга с теми же группами (изображение болееявный): http://puu.sh/CogJM/476c792726.png
Я пробовал это: Angular 2: повторное использование одного и того же компонента Но «уникальный идентификатор» не является решением.Может быть, я не могу использовать один и тот же компонент на той же странице, но когда я использую "ngFor", он работает
Весь код является частью кода.Train-view.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>
app-group-view получит все группы и сделает "ngFor" для "groups.components"
, так что групповое представление ts
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GroupService } from '../services/group.service';
import { Subscription } from 'rxjs';
import { Group } from '../model/Group.model';
let uniqueId = 0;
@Component({
selector: 'app-group-view',
templateUrl: './group-view.component.html',
styleUrls: ['./group-view.component.css']
})
export class GroupViewComponent implements OnInit {
@Input() idTraining: number;
id = "tr-" + uniqueId++;
groups: Group[];
groupSubscription: Subscription;
idFormation = null;
constructor(
private GroupService: GroupService,
private route: ActivatedRoute){
}
onSave(){
console.log('save');
}
ngOnInit() {
// this.idFormation = this.idTraining != null ? this.idTraining : this.route.snapshot.params['id'];
this.idFormation = this.idTraining ;
this.groupSubscription = this.GroupService.groupsSubject.subscribe(
(groups: any[]) => {
this.groups = groups;
}
);
this.GroupService.emitGroupsSubject();
this.onFetch();
}
addGroup(){
if(this.idFormation != null){
let newGroup : Group= new Group(undefined,"nouveau groupe",this.idFormation,"");
this.groups.push(newGroup);
}
}
onFetch() {
//const id = this.route.snapshot.params['id'];
this.GroupService.getGroupsFromServer(this.idTraining);
}
ngOnDestroy() {
this.groupSubscription.unsubscribe();
}
}
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>
Группа приложений представляет собой простой компонент с html.
group.service.ts
@Injectable()
export class GroupService {
groupsSubject = new Subject<any[]>();
constructor(private httpClient: HttpClient) { }
groups : Group[] ;
getGroupsFromServer(idGroups : number = null) {
let url = 'https://XXX.fr/';
if(idGroups != null){
url += '/trainings/' + idGroups +"/groups";
}else{
url += 'groups/';
}
this.httpClient
.get<any[]>(url)
.subscribe(
(response) => {
this.groups = response;
this.emitGroupsSubject();
},
(error) => {
console.log('Erreur ! : ' + error);
}
);
}
emitGroupsSubject(){
if(this.groups != null)
this.groupsSubject.next(this.groups.slice());
}
}
Смотрите изображение ниже, я написал то, что хочу.http://puu.sh/CogJM/476c792726.png
Надеюсь, вы поймете мою проблему, спасибо вам за помощь Томас
ОБНОВЛЕНИЕ
Я попробовал решение @ 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>
групповой просмотр:
<li class="list-group-item" *ngFor="let group of groups">
<h4>{{ group.training_name }} groupe {{ group.name }} </h4>
</li>
Результат:
У меня одинаковые группы для каждой тренировки.Если перейти на вкладку «Сеть» (консоль Mozillia), она будет соответствовать последнему запросу Ajax: http://puu.sh/Coj8v/12a01b2f72.png Спасибо вам @ Gérôme Grignon