Только начинаю изучать Ангуляр, поэтому прошу прощения за вопрос.
Из шаблона, который представлен в виде таблицы с пагинацией приходит событие клика по кнопке удаления объект из массива. Сама логика реализована в классе сервиса. Внутри само событие удаления отрабатывает, но в TableComponent изменение состояния не приходит.
table.component.ts
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
providers: [
TableService
]
})
export class TableComponent implements OnInit{
displayedColumns: Array<String> = ['id', 'Firstname', 'Lastname', 'Middlename', 'Position', 'Date Of Birth', 'Active', 'operations'];
dataSource: Array<Programmer> = [];
constructor(private bottomSheet: MatBottomSheet, private tableService: TableService) {
}
ngOnInit() {
this.getData();
}
add() {
this.bottomSheet.open(PopupComponent);
// this.tableService.add(programmer);
this.getData();
}
getData(): void {
this.dataSource = this.tableService.getData();
}
remove(id: number): void {
this.tableService.remove(id);
this.getData();
}
edit(id: number) {
this.bottomSheet.open(PopupComponent);
}
}
table.service.ts
import { Injectable } from '@angular/core';
import {Programmer} from "../interfaces/Programmer";
import {Position} from "../enums/Position";
@Injectable({
providedIn: 'root'
})
export class TableService {
private programmers: Programmer[] = [
{
id: 1,
firstName: 'Павел',
lastName: 'Петров',
middleName: '',
position: Position.JUNIOR,
dateOfBirth: '11/01/2001',
active: true
},
{
id: 12,
firstName: 'Павел',
lastName: 'Петров',
middleName: '',
position: Position.JUNIOR,
dateOfBirth: '11/01/2001',
active: true
},
{
id: 13,
firstName: 'Павел',
lastName: 'Петров',
middleName: '',
position: Position.SENIOR,
dateOfBirth: '11/01/2001',
active: true
},
{
id: 10,
firstName: 'Павел',
lastName: 'Петров',
middleName: '',
position: Position.MIDDLE,
dateOfBirth: '11/01/2001',
active: true
},
{
id: 15,
firstName: 'Павел',
lastName: 'Петров',
middleName: '',
position: Position.MIDDLE,
dateOfBirth: '11/01/2001',
active: true
},
{
id: 16,
firstName: 'Павел',
lastName: 'Петров',
middleName: '',
position: Position.MIDDLE,
dateOfBirth: '11/01/2001',
active: true
}
]
constructor() { }
getData(): Array<Programmer> {
return this.programmers;
}
remove(id: number) {
this.programmers = this.programmers.filter(programmer => programmer.id !== id);
}
add(programmer: Programmer) {
this.programmers = [...this.programmers, programmer];
}
}
Удаляю... (5) [{…}, {…}, {…}, {…}, {…}] table.service.ts
Данные внутри компонента (6) [{…}, {…}, {…}, {…}, {…}, {…}] table.component.ts:37
remove
, после удаления нужно заново получить данные, то есть добавить строкуthis.dataSource.data = this.tableService.getData();
provideIn: 'root'
, получается, что у вас два экземпляра сервиса, вы смотрите в одном данные, а компонент работает с другим экземпляром