почему не удаляются элементы из таблицы?

Question

Только начинаю изучать Ангуляр, поэтому прошу прощения за вопрос.

Из шаблона, который представлен в виде таблицы с пагинацией приходит событие клика по кнопке удаления объект из массива. Сама логика реализована в классе сервиса. Внутри само событие удаления отрабатывает, но в 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

Answer 1

В данном случае, проблема была с тем, что данные не были обновлены, после того как изменился массив в сервисе.

remove(id: number): void {
    this.tableService.remove(id);
    // здесь нужно получать данные
    this.getData();
  }

Для того, чтобы изменения подтягивались реактивно, можно использовать rxjs, что позволит избавится от постоянных получений данных.

table.service.ts

// Injectable пустой, так как сервис у нас провайдится непосредственно в сам компонент.
@Injectable()
export class TableService {
  private programmers: Programmer[] = [
    ...
  ];

  // создаем экземпляр BehaviorSubject
  programmer$ = new BehaviorSubject<Programmer[] | null>(this.programmers);

  remove(id: number) {
    this.programmers = this.programmers.filter((programmer) => programmer.id !== id);
    // передаем новое значение в subject.
    this.programmer$.next(this.programmers);
  }

  add(programmer: Programmer) {
    this.programmers = [...this.programmers, programmer];
    this.programmer$.next(this.programmers);
  }
}

table.compnent.ts

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  providers: [TableService],
})
export class TableComponent {

  dataSource$: BehaviorSubject<Programmer[] | null>;

  constructor(
    private bottomSheet: MatBottomSheet,
    private tableService: TableService
  ) {
    // создаем подписку на список программистов
    this.dataSource$ = this.tableService.programmer$;
  }

  add() {
    this.tableService.add(programmer);
  }

  remove(id: number): void {
    this.tableService.remove(id);
  }
}

table.compnent.html

<ng-container *ngIf="dataSource$ | async; let dataSource">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   ...
  </table>
</ng-container>

С помощью async-пайпа у нас нет необходимости создавать разные отписки на события, все будет автоматизировано. При каждом изменении в subject будет осуществляться перерисовка списка.

БЛОГ НА HUSL

почему не удаляются элементы из таблицы?

Ответы (1 шт):