Click here to Skip to main content
15,881,715 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have simple post request, that I use to create messages. The problem is that the function sendMessage() will work the same way forever, sending the same message into DB even after I change text. This continues until I destroy the table.

Will be grateful for any help, new into Ng.

What I have tried:

The way I thaught to solve the problem was to unsubscribe immediately after request, but it seems that I do it wrong, cause message even does not appear into Db.

Service


C#
@Injectable({
  providedIn: 'root',
})
export class MessageService {
  private url = environment.apiUrl + '/message';

  constructor(private http: HttpClient) {}

  public create(request: CreateMessageRequest): Observable<void> {
    return this.http.post<void>(this.url, request);
  }
}



TS

TypeScript
public sendMessage(message: string){
    let request: CreateMessageRequest = {
      Message:  message, 
    }
    const req = this.messageService.create(request).subscribe();
    //req.unsubscribe(); if add, nothing will apper into db even after first function call
  }



HTML

HTML
<form>
      <textarea #refVariable [value]="test" type="text" placeholder="Write message"></textarea>
      <button class="buttonTwo" type="submit" (click)="sendMessage(refVariable.value)"></button>
  </form>


Also tried:

TypeScript
export class DialogsComponent implements OnInit, OnDestroy {
constructor(private messageService: MessageService){}

private unsubscribe$ = new Subject<void>();
ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

public sendMessage(message: string){
    let request: CreateMessageRequest = {
      Message: message,
    }
    this.messageService.create(request)
    .pipe(takeUntil(this.unsubscribe$))
    .subscribe();
  }
}



And this one:

TypeScript
export class DialogsComponent implements OnInit, OnDestroy {
constructor(private messageService: MessageService){}
alive: boolean = true
ngOnDestroy(): void {
    this.alive = false;
  }

public sendMessage(message: string){
    let request: CreateMessageRequest = { 
      Message: message,
    }
    this.alive = true;
    this.messageService.create(request)
    .pipe(takeWhile(() => this.alive))
    .subscribe();
  }
}
Posted
Updated 22-Jul-22 0:07am

1 solution

You could use the rjxs method take() which allows you to specify a number of times the subscription should be valid for. This is a quick and easy way to automate the unsubscribe process:
this.messageService.create(request).pipe(take(1)).subscribe(e => {});

However I'm not even sure if you actually need to subscribe in order to make the HTTP request go through. The subscription model is only really for monitoring the response back from the request, if you omit the subscription part I would expect the HTTP request to still go through?
 
Share this answer
 
Comments
karnotavr 22-Jul-22 6:29am    
1) take(1) does not help though
2) maybe I am doing something wrong, but in this case without subscribe there will be no request even into "Network", so I even have had no idea is that a mistake. If you say so, maybe I should use something to get more information about that? Where to look? Debug?
Chris Copeland 22-Jul-22 7:41am    
Have you tried debugging the Javascript/Typescript? Looking back at your original question it sounds like the new value from the input isn't being passed into the function correctly. Try printing out the message in the sendMessage() method and check that the value has actually changed. I just noticed you're giving the input a template reference #refVariable and accessing the value through that. You probably shouldn't do that, you could get the new input value in one of two ways:

1. Give the input an id attribute and use:
const element = <HTMLInputElement>document.getElementById('id here')!;
const message = element!.value;

2. Use reactive forms to bind the input value to a FormGroup object, and get the input value through that: https://angular.io/guide/reactive-forms[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900