Insert a new item into the array located within an Observable entity

In my angular application, I have a page where I am showcasing an object that contains an array of comments within it. This object is loaded into my class as an Observable and then displayed in the HTML using:

<div class="container-fluid mt--7" *ngIf="drill | async as item else loading">

This allows for a display placeholder until the Observable data loads.

On this page, there is functionality to add a new comment to the existing Drill object. While saving this object to the database works fine, I want to update the existing Drill object with the newly added comment without having to re-query the database to reflect the change.

However, I'm struggling to find a way to update the Observable from inside the .subscribe method of the service call after saving the new comment.

addComments(): void {
    const comment = new Comment(null, this.commentsForm.get('comment').value, this.commentsForm.get('rating').value);
    this.drillService.addComments(this.id, comment).subscribe(comment => {
     ---- This is where I'm stuck on what to do ------
    });

  }

Answer №1

If you want to make updates to an observable directly, there are two methods you can use to resolve your issue.

  1. Instead of utilizing the drill observable method, store comments in an array and add new comments to this array. Then, utilize this array to display on the HTML side.
  1. Another approach is to create a new observable using Subject (an rxjs operator). You can refer to examples on how to create observables using subject by visiting this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular Element's emitted number transforms into a string once it reaches the JavaScript event listener

Within my Angular Elements web component, I have defined and emitted events in the following way: @Input() groupId: number = -1; @Output('group_change') groupChange!: EventEmitter<number>; ... this.groupChange.emit(groupId); I integrated ...

Options for Angular's routerLinkActiveDirective

I have a link that looks like this <li routerLinkActive="active" class="nav-item"> <a [routerLink]="['contracts']" [queryParams]="{ activeOnly: false }" class="nav-link">Contracts</a> </li> As you can see, in the param ...

Issue: ChildrenOutletContexts provider not found

I am encountering difficulties using angular/material with Angular 5. Despite following a basic Tutorial, the webpage goes blank whenever I include any material tags in the component HTML. When running ng serve with Angular CLI, no issues are reported. D ...

The data type '{ [key: string]: number; }' cannot be assigned to type 'T'

I’m working with a complex TypeScript type and trying to manage it within a function. Here’s what I have: type T = { a: number } | { b: number } function func(k: 'a' | 'b', v: number) { // error message below const t: T = { ...

The module "@clerk/nextjs/server" does not contain a member with the name "clerkMiddleware" available for export

Currently, I am working on Nextjs 14 with typescript and implementing authentication and authorization using Clerk. Following the instructions in the Clerk documentation, I included the code snippet below in my middleware.ts file: import { authMiddleware } ...

Exploring Typescript Reflection: The Importance of Required Parameters and Default Values

In summary: Is there a method to determine whether a typescript parameter is mandatory and/or has a preset value? Expanding further: Imagine I have the code snippet below: //Foo.ts class Bar { foo(required:string,defaultValue:number=0,optional?:boole ...

Two-way data binding in Angular 2 is a powerful feature that allows for

My goal is to construct a parent component called Action, which includes two child components named Infos and Localisation. I want to connect the inputs of the children with the parent model. This is the model: export class Action{ title: string; ...

Issue encountered while attempting to remove a post from my Next.js application utilizing Prisma and Zod

Currently, I'm immersed in a Next.js project where the main goal is to eliminate a post by its unique id. To carry out this task efficiently, I make use of Prisma as my ORM and Zod for data validation. The crux of the operation involves the client-sid ...

Configuring the CKEditor edit functionality in Angular 2

If you're looking to configure your CKEditor in Angular2, you can refer to the documentation provided by CKEditor here. Here is an example of how I am using it in my HTML: <ckeditor [(ngModel)]="ckeditorContent" [config]="{toolbar : 'Bas ...

Return the reference to an injected service class from the location where it was implemented

Is it feasible to return a reference from a component class with a custom interface implemented to the injected service class in my Angular 6 project? Here is an example of what I am aiming for. ServiceClass @Injectable() export class MyService { co ...

Angular's virtual scroll feature can be a little wonky and j

While utilizing Angular Material Virtual scroll, I've encountered an issue where the items load correctly into the DOM, but during scrolling, it jumps around and suddenly moves to the end. <cdk-virtual-scroll-viewport #scrollViewport (scrolled ...

Extra assistance might be required to manage the output from these loaders

I'm in the process of developing a State Management Library for ReactJs. However, when I integrate it into my React project (built with create-react-app), an error is thrown: Failed to compile. path/to/agile/dist/runtime.js 116:104 Module parse faile ...

Tips for preventing the impact of angular mat-panel position changes on matdialog

In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...

An issue has been identified with React's HTML input maxLength feature where it does not display an error

Within my form, I have an input field that currently does not include validation for a maximum length. <input type="text" className="form-control" id="company" onBlur= ...

The TypeScript, NextJS project is encountering an issue where it is unable to read the property 'cwd' due to a TypeError

I've noticed this particular error popping up frequently online, but it's not quite matching the issue I'm facing. Every time I execute yarn dev, I encounter the following error: next-dev.js?53bc:89 Error was not caught TypeError: Cannot re ...

Setting state dynamically in Typescript with ReactJS

Within my state, I have defined this interface: interface State { id: string; name: string; description: string; dimensionID: string; file: File | null; operator: string; isFormValid: boolean; filename: string; }; To handle changes, I&apo ...

Retrieve the current state of the toggle component by extracting its value from the HTML

I have a unique component that consists of a special switch and several other elements: <mat-slide-toggle (change)="toggle($event)" [checked]="false" attX="test"> ... </mat-slide-toggle> <p> ... </p> F ...

Encountering issues with importing a module from a .ts file

Although I have experience building reactJS projects in the past, this time I decided to use Node for a specific task that required running a command from the command line. However, I am currently facing difficulties with importing functions from other fil ...

Issue with identifying the standard property `form.invalid` in a template-based form during testing

In my pursuit to test a template driven form, I aim to ensure that the user enters a name by initially disabling the form's button. This is achieved through the use of the 'required' property on the input field for the name. To implement th ...

The behavior of the dynamically generated object array differs from that of a fixed test object array

I'm facing an issue while trying to convert JSON data into an Excel sheet using the 'xlsx' library. Everything works perfectly when I use test data: //outputs excel file correctly with data var excelData = [{ test: 'test', test2: ...