Есть таблица со списком людей,у каждого рядом есть кнопка, при нажатии на которого человек добавляется в группу а кнопка исчезает(код ниже). После идёт задача с которой не могу справиться։ Если в группе больше трёх человек, нужно для последующих людей создать новую группу и т.д.
вот собственно и сам код:
//data.service.ts
import { Injectable } from '@angular/core';
import {Student} from '../lib/students'
@Injectable({
providedIn: 'root'
})
export class DataService {
group:object[]=[]
student:object[]=[
new Student('name1','surname1',false),
new Student('name2','surname2',false),
new Student('name3','surname3',false),
new Student('name4','surname4',false),
new Student('name5','surname5',false)
]
moveToGroup(obj){
obj.ingroup=true
this.group.push(obj)
}
constructor() {}
}
//group.components.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/service/data.service';
@Component({
selector: 'app-group',
templateUrl: './group.component.html',
styleUrls: ['./group.component.css']
})
export class GroupComponent implements OnInit {
constructor(public element:DataService) { }
ngOnInit(): void {
}
}
//student.components.ts
import { Component, OnInit } from '@angular/core';
import{ DataService} from '../../service/data.service'
@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
constructor(public element:DataService) { }
ngOnInit(): void {
}
}
//student.ts
export class Student{
name:string
surname:string
ingroup:boolean
constructor(name,surname,ingroup){
this.name=name;
this.surname=surname;
this.ingroup=ingroup
}
}
/*<!--group.component.css*/
.groups{
background: yellowgreen;
width: 200px;
height: 300px;
padding: 80px 2px ;
list-style: none;
}
<!--index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tsdas</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
<!--app.component.html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">
<app-group></app-group>
</div>
<div class="col-md-6">
<app-student></app-student>
</div>
</div>
</div>
<!--student.component.html -->
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of element.student">
<td>{{item.name}}</td>
<td>{{item.surname}}</td>
<td><button class="btn btn-success" (click)="element.moveToGroup(item)" *ngIf="!item.ingroup">Add to group</button></td>
</tr>
</tbody>
</table>
<!--group.component.html -->
<div class="groups">
<p *ngFor="let grs of element.group">{{grs.name}} {{grs.surname}}</p>
</div>