Angular rxjs pipe удалить элемент из массива

У меня есть сервис с функцией удаления. Функция удаления вызовет api и вернет true или false. Если это правда, я ищу индекс в моем массиве, объединяю его и возвращаю новый массив. Так например

private items = [];
onItemDeleted  = new Subject<any>();

  delete(id:number): Observable<any> {
    return this.http.delete('http://my.api.com/item/' + id)
      .pipe(
        switchMap(checkServerSuccessResponse),
        map(data => {
            const index1  = this.items.findIndex((element) => {
              return element.id === id;
            });
            if (index1 >= 0 ) {
              this.items.splice(index1,1);
            }
            this.onItemDeleted.next(this.items);
            return this.items;
          }
        ),
        catchError(returnFalse),
      );
  }

У меня есть помощник для карты переключателей:

export function checkServerSuccessResponse(data: Response): Observable<any> {
    return (data && data['success'] === true) ? of(data) : throwError("server responded false");
}

Хотя это работает, у меня есть ощущение, что раздел карты можно переформатировать. Сначала я подумал о фильтре (после карты переключателей), чтобы исключить элемент с указанным мной идентификатором, а затем создать новый массив, но затем я понял, что фильтр не подписан на массив this.items.

Как лучше всего это сделать?

Я не знаю другого кода, например, откуда взялся this.items, почему вы публикуете обновленные элементы на onItemDeleted. Но, вероятно, я бы: а) передал this.items в метод delete, также как и delete(id, items), потому что в то время, когда придет ответ, вы не знаете, что произойдет с this.items; б) то, что находится внутри map, переместите в отдельную функцию, это будет removeById(items, id); c) pipe станет switchMap(checkServerSuccessResponse), map(removeById), tap(onItemDeleted.next), catchError(returnFalse) (сокращенные вызовы соответствуют этому комментарию).

muradm 30.10.2018 10:35

Я тоже хочу перенести логику удаления в функцию removeById. Но я не понимаю карту (removeById). Поскольку в стеке канала первым аргументом является ответ от вызова API (помощник checkServerSuccessResponse), а не массив this.items

fransyozef 30.10.2018 11:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
5 546
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знаю другого кода, например, откуда взялся this.items, почему вы публикуете обновленные элементы на onItemDeleted. Но, вероятно, я бы: а) передал this.items в метод удаления, также как и delete(id, items), потому что в то время, когда придет ответ, вы не знаете, что произойдет с this.items; б) эту вещь на карте переместите в отдельную функцию, которой будет removeById(items, id); в) упростить pipe. Нравится:

private items = [];
onItemDeleted  = new Subject<any>();

  removeById(fromItems, id) {
    const index1  = fromItems.findIndex((element) => {
      return element.id === id;
    });
    if (index1 >= 0 ) {
      fromItems.splice(index1,1);
    }
    return fromItems;
  }

  // who ever calls this, should provide copy of items also
  // then you will be kinda protected from concurrent
  // modification, when http response complete, but this.items
  // is completely different, from when http request started
  delete(fromItems, id:number): Observable<any> {
    return this.http.delete('http://my.api.com/item/' + id)
      .pipe(
        switchMap(checkServerSuccessResponse),
        map(data => this.removeById(fromItems, id)),
        tap(items => this.onItemDeleted.next(items)),
        catchError(returnFalse),
      );
  }

тьфу ... это имеет смысл прямо сейчас ... Я должен был привязать функцию непосредственно к функции removebyid.

fransyozef 30.10.2018 11:52
pipe отлично подходит для выражения того, что вы хотите сделать, по возможности с одним лайнером, становится намного более читаемым :)
muradm 30.10.2018 11:57

хе-хе да .. спасибо .. я так застрял в своей голове .. теперь он работает, даже как глобальная вспомогательная функция :)

fransyozef 30.10.2018 12:08

Другие вопросы по теме