Pracuję nad kątem 8.

  1. Mam stronę, która wyświetla tabelę. Tabela wyświetla dane z tablicy obiektowej {X0}}, który komponent otrzymuje jako @Input().
  2. Mam funkcję sortowania na kolumnach tej tabeli.
  3. Mam również opcję usuwania w każdym wierszu. Po kliknięciu opcji Delete sprawia, że połączenie API, aby usunąć wiersz, a następnie kolejne połączenie, aby pobrać tablicę tasklist. To jest efekt, który dla tego samego
  @Effect()
  DeleteTask$: Observable<Action> = this.actions$.pipe(
    ofType(importActions.DELETE_TASK),
    switchMap(params =>
      this.globalService
        .deleteTask(params)
        .mergeMap(deleteSuccess => {
          return from([
            new importActions.DeleteTaskSuccess(deleteSuccess),
            new importActions.LoadTaskList(),
          ]);
        })
        .catch((error, caught) => {
          return Observable.of(new GlobalError(error));
        }),
    ),
  );

Moim problemem jest to, że funkcja sortowania działa dobrze, gdy robię na pierwszej stronie obciążenia. Ale jeśli usunąłem wiersz, a następnie pobrać listę zadań post-usunąć, otrzymuję następujący błąd:

ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property '0' of object '[object Array]'
TypeError: Cannot assign to read only property '0' of object '[object Array]'

Zgodnie z komunikatem o błędzie następująca funkcja w moim kodzie daje błąd

  exchange(a, b) {
    const temp = this.taskList[a];
    this.taskList[a] = this.taskList[b]; //this line gives error
    this.taskList[b] = temp;
  }

Ta funkcja jest częścią kodu sortowania, który używa tablicy tasklist i sortuje.
przepływ jest ngOnchanges(detects change is taskList array) calls --> this.taskChange('export_name', 'asc') based on some condition calls --> this. exchange(a, b)

Poniżej znajduje się moja metoda ngonchanges

ngOnChanges(changes: SimpleChanges) {
    if (this.taskList !== null && this.taskList !== undefined) {
      this.taskChange('export_name', 'asc');
    }
  }

Poniżej znajduje się główna metoda sortowania

  async taskChange(value, taskOrder) {
    this.sortOrder = taskOrder;
    this.selectedValue = value;
    const expr = {
      asc: (a, b) => a > b,
      desc: (a, b) => a < b,
    };
    for (let i = 0; i < this.taskList.length; i++) {
      for (let j = i + 1; j < this.taskList.length; j++) {
        switch (value) {
          case 'export_name':
            if (
              expr[this.sortOrder](this.taskList[i].name, this.taskList[j].name)
            ) {
              this.exchange(i, j);
            }
            break;
          case 'file_type':
            let type1;
            let type2;
            type1 = this.exportType.transform(this.taskList[i].code, []);
            type2 = this.exportType.transform(this.taskList[j].code, []);
            if (expr[this.sortOrder](type1, type2)) {
              this.exchange(i, j);
            }
            break;
        }
      }
    }
  }

Nie jestem pewien, co dokładnie powoduje ten błąd, gdy tablica zmienia się po raz drugi. Próbowałem kilka rzeczy, ale żaden z nich nie pracował. Z tego, co znalazłem w Internecie, może się zdarzyć, ponieważ próbuję zmienić tablicę otrzymaną jako @Input. Ale powyższy kod, który zamuścił "tablicę listy zadań, działa na obciążeniu strony początkowej. I przestaje działać, gdy zmienia się tablica. Czy ktoś mógłby mi pomóc?

0
Amruta 22 listopad 2020, 21:12

1 odpowiedź

Najlepsza odpowiedź

Spróbuj utworzyć kopię tablicy przed próba tego posokoć. Jak przy użyciu operatora rozprzestrzeniania.

arrayForSort = [...this.taskList]

Potem po sortowaniu można przypisać go z powrotem do pola listy zadań

5
Jan Fiołka 22 listopad 2020, 18:52