Angular 6 - изменение метода добавления для обновления при просмотре

Question

Я делаю изменения в списке данных, который отображается на app.component.html

<ul>
<li *ngFor="let data of DataSource"> 
        {{ data.id }} - {{data.title}} 
</li>
</ul>

Мне удалось выдвинуть новую строку данных следующим образом:

  create() {
    const newPostId = this.postId + 1;
    this.apiService.create(newPostId, this.postTitle, this.postText).subscribe(result => {
      const newId = result['id'];
      this.retrieveData.push({id: newId, title: this.postTitle});
      this.dataCount = this.dataCount + 1;
    }, error => console.log('There was an error: ', error));
  }

Это отлично работает и добавляет новую строку в конец списка данных.

Мой вопрос:

Как изменить мой метод create () для обновления текущего и отображения изменений в app.component.html?

Answer 1

Предполагая, что вам нужно найти элемент в массиве, идентификатор которого совпадает с тем, который вы обновляете, и заменить его новым, вы должны сделать что-то вроде:

this.apiService.update(...).subscribe(result => {
  const newId: number = result['id'];
  const currentItemIndex = this.retrieveData.findIndex((item: {id: number}) => item.id === newId);
  if (currentItemIndex > -1) {
      // replace the current item with the new one
      this.retrieveData.splice(currentItemIndex, 1, {id: newId, title: this.postTitle});
  } else {
     // TODO: if it wasnt there to being with, is this an error?
  }
}, error => console.log('There was an error: ', error))