Angular subscription not updating after post-CodePudding

I am creating a basic app and am struggling to understand why my subscription is not updating automatically after I add an item to my database with http post. I will put my code below.

Inside the add items component this is called when the user completes a form and presses submit. My thought process is that it calls to refresh the items once the new item is added.

this.service.addItem(this.item).subscribe(() => {this.service.getItems()});

Inside the item service which is being called above, there are two functions to post and get my data from the table

  public getItems(): Observable<Item[]>{
    return this.httpClient.get<Item[]>(this.url);
  }

  public addItem(item: Item): Observable<Item>{
    return this.httpClient.post<Item>(this.url, item);
  }

Finally in my list-item component, I subscribe to service.getItems() and set a local variable which is used to update my view. This works on page reload, but I want it to update the list after an item is added without refreshing. The code looks like this.

export class ListItemsComponent implements OnInit {

    items: Item[];
    constructor(private service:ItemService) {
    }

    ngOnInit(): void {
      this.service.getItems().subscribe((items) => {this.items = items});
    }
}

Any help or general advice would be much appreciated, I'm quite new to Angular but I'll be using it at work soon so trying to get up to speed.

CodePudding user response：

Look for a BehaviorSubject (https://rxjs.dev/guide/subject) in stead of a local variable to store the state of the items and when to read all items after an update.

Then add a subscription to the Subject to read all items in the ListComponent.

CodePudding user response：

this.service.addItem(this.item).subscribe(() => {this.service.getItems()});

This is the line that needs to be changed. 'getItems()' method is Observable, It needs to be subscribed as you are doing in ngOnInit().

 this.service.getItems().subscribe((items) => {this.items = items});

Or you can add the item to the items.

  this.service.addItem(this.item).subscribe((item) => {
      this.items.push(item)
    });

CodePudding user response：

You have miss the subscribe from getItems after addItem

this.service.addItem(this.item).subscribe(() => {this.service.getItems()});

it need some modify to be like

this.service.addItem(this.item).subscribe(() => {
  this.service.getItems().subscribe((item) => {
    this.item = item;
  });
});

For saving form time (as you mentions about your short period for learning this is what the code should be look like.

export class ListItemsComponent implements OnInit {

  items: Item[];

  constructor(private service: ItemService) {
  }

  ngOnInit(): void {
    this.getItems();
  }
  
  getItems(): void {
    this.service.getItems().subscribe((items) => {
      this.items = items;
    });
  }

  submit(): void {
    this.service.addItem(this.item).subscribe(() => {
      this.getItems();
    });
  }
}

FYI, This is not the best way to refreshing your data after adding all the time. To be more advance, you can update the data locally after got success response and not call get data again after it.