0

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

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

10
  • Кажется, что в методе remove, после удаления нужно заново получить данные, то есть добавить строку this.dataSource.data = this.tableService.getData(); 9 мар 2022 в 3:29
  • @SergeyGlazirin А здесь не заключается дело в жизненных циклах компонента? 9 мар 2022 в 6:39
  • А changeDetection сейчас какой стоит Default или OnPush у компонента? 9 мар 2022 в 7:17
  • @SergeyGlazirin простите, не понимаю о чем Вы(. Обновил код в вопросе. Убрал в коде console.log'и 9 мар 2022 в 8:49
  • Возможно, проблема в двух провайдерах у сервиса. Удалите у сериса provideIn: 'root', получается, что у вас два экземпляра сервиса, вы смотрите в одном данные, а компонент работает с другим экземпляром 9 мар 2022 в 11:37

1 ответ 1

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 будет осуществляться перерисовка списка.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.