Styjun

Why is Mitch McConnell blocking nominees to the Federal Election Commission?

Why don't "echo -e" commands seem to produce the right output?

Ways you can end up paying interest on a credit card if you pay the full amount back in due time

Was there an original & definitive use of alternate dimensions/realities in fiction?

How can I improve my formal definitions?

Could these polynomials be identified?

Received email from ISP saying one of my devices has malware

How are the cards determined in an incomplete deck of many things?

Are there balance issues when allowing attack of opportunity against any creature?

Polarity of gas discharge tubes?

Why do modes sound so different, although they are basically the same as a mode of another scale?

Why wasn't Linda Hamilton in T3?

How can an F-22 Raptor reach supersonic speeds without having supersonic inlets?

Pandas transform inconsistent behavior for list

Blender - Alpha is Luminance equivalent

Can a system of three stars exist?

Are there consequences for not filing a DMCA (any country)

Squares inside a square

Function of the separated, individual solar cells on Telstar 1 and 2? Why were they "special"?

Tikz: Draw simplified BLE-Stack

Am I required to correct my opponent's assumptions about my morph creatures?

Is the equational theory of groups axiomatized by the associative law?

Do universities maintain secret textbooks?

To minimize the Hausdorff distance between convex polygonal regions

Angular7 - view doesnt get updated when using debouncer

Angular 2 - View not updating after model changesAngular2 async callsPerformance of Observable Data Service in Angular/NativeScriptcorrect way to append objects to array in angular callbackAcquireToken Observable errors before returning tokenPlaceholder in mat-autoComplete does not work as illustrated in the Angular Material DocumentationAngular 6+ TypeError: Cannot read property 'firstName' of undefinedObservables: Creating a mock http requestAngular7 Element with Components getting Schema errorI am not getting the textbox value in typescript angular7

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I have this search service:

export class SearchbarComponent implements OnInit 
 data: Observable<any>;
 search = new FormControl();

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.data = this.search.valueChanges
 .pipe(
 debounceTime(1),
 distinctUntilChanged(),
 )
 .pipe(switchMap(search => 
 this.searchService.getSearchResults(search)));
 

In the view I do something like this

<input placeholder="Search users here" [formControl]="search" />

<div *ngFor="let d of (data | async)" >
 d.name 
</div>

it works great but only on the first time but after showing the first result, the view doesnt get updated after that.

What am I doing wrong?

angular typescript

share|improve this question

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Shouldn't be this.data = this.search.valueChanges instead of this.users = this.search.valueChanges?
  
  – dcg
  Mar 28 at 0:31
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes sorry that should be data. I will update my question. Though the main problem still persists
  
  – codeninja
  Mar 28 at 0:31
  
  

  
  
  
  

add a comment | 

1

I have this search service:

export class SearchbarComponent implements OnInit 
 data: Observable<any>;
 search = new FormControl();

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.data = this.search.valueChanges
 .pipe(
 debounceTime(1),
 distinctUntilChanged(),
 )
 .pipe(switchMap(search => 
 this.searchService.getSearchResults(search)));
 

In the view I do something like this

<input placeholder="Search users here" [formControl]="search" />

<div *ngFor="let d of (data | async)" >
 d.name 
</div>

it works great but only on the first time but after showing the first result, the view doesnt get updated after that.

What am I doing wrong?

angular typescript

share|improve this question

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Shouldn't be this.data = this.search.valueChanges instead of this.users = this.search.valueChanges?
  
  – dcg
  Mar 28 at 0:31
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes sorry that should be data. I will update my question. Though the main problem still persists
  
  – codeninja
  Mar 28 at 0:31
  
  

  
  
  
  

add a comment | 

I have this search service:

export class SearchbarComponent implements OnInit 
 data: Observable<any>;
 search = new FormControl();

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.data = this.search.valueChanges
 .pipe(
 debounceTime(1),
 distinctUntilChanged(),
 )
 .pipe(switchMap(search => 
 this.searchService.getSearchResults(search)));
 

In the view I do something like this

<input placeholder="Search users here" [formControl]="search" />

<div *ngFor="let d of (data | async)" >
 d.name 
</div>

it works great but only on the first time but after showing the first result, the view doesnt get updated after that.

What am I doing wrong?

angular typescript

share|improve this question

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

export class SearchbarComponent implements OnInit 
 data: Observable<any>;
 search = new FormControl();

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.data = this.search.valueChanges
 .pipe(
 debounceTime(1),
 distinctUntilChanged(),
 )
 .pipe(switchMap(search => 
 this.searchService.getSearchResults(search)));
 

<input placeholder="Search users here" [formControl]="search" />

<div *ngFor="let d of (data | async)" >
 d.name 
</div>

angular typescript

angular typescript

share|improve this question

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

share|improve this question

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

edited Mar 28 at 2:09

malbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

asked Mar 28 at 0:28

codeninjacodeninja

633 bronze badges

2 Answers
2

active

oldest

votes

0

Try this 👍

.html

<input placeholder="Search users here" (keyup)="searchTerm$.next($event.target.value)"/>

.ts

import Observable from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';


export class SearchbarComponent implements OnInit

 searchTerm$ = new Subject<string>(); // <==== new

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.searchTerm$.subscribe( term => 
 this.searchService.getSearchResults(q)
 )
 

share|improve this answer

edited Mar 28 at 1:56

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hmm this doesn't do anything. The service is not getting called at all
  
  – codeninja
  Mar 28 at 1:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeninja Now works
  
  – George C.
  Mar 28 at 1:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GeorgeC. Nope, still same issue :/
  
  – Software Ninja
  Mar 28 at 1:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GeorgeC. I created a stackblitz. Check it out stackblitz.com/edit/…
  
  – Software Ninja
  Mar 28 at 2:05
  
  

  
  
  
  

add a comment | 

0

I have create a working example base in your code the only difference between yours and mine is the service check mine

@Injectable()
export class SearchbarService 

 constructor() 

 public getSearchResults(value) 
 const arr = [1,2,3,4,5,6]
 return of([...arr.map(c=> Math.floor(Math.random() * 100))]); // return an observable
 

stackblitz demo

share|improve this answer

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55388453%2fangular7-view-doesnt-get-updated-when-using-debouncer%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Try this 👍

.html

<input placeholder="Search users here" (keyup)="searchTerm$.next($event.target.value)"/>

.ts

import Observable from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';


export class SearchbarComponent implements OnInit

 searchTerm$ = new Subject<string>(); // <==== new

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.searchTerm$.subscribe( term => 
 this.searchService.getSearchResults(q)
 )
 

share|improve this answer

edited Mar 28 at 1:56

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hmm this doesn't do anything. The service is not getting called at all
  
  – codeninja
  Mar 28 at 1:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeninja Now works
  
  – George C.
  Mar 28 at 1:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GeorgeC. Nope, still same issue :/
  
  – Software Ninja
  Mar 28 at 1:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GeorgeC. I created a stackblitz. Check it out stackblitz.com/edit/…
  
  – Software Ninja
  Mar 28 at 2:05
  
  

  
  
  
  

add a comment | 

0

Try this 👍

.html

<input placeholder="Search users here" (keyup)="searchTerm$.next($event.target.value)"/>

.ts

import Observable from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';


export class SearchbarComponent implements OnInit

 searchTerm$ = new Subject<string>(); // <==== new

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.searchTerm$.subscribe( term => 
 this.searchService.getSearchResults(q)
 )
 

share|improve this answer

edited Mar 28 at 1:56

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hmm this doesn't do anything. The service is not getting called at all
  
  – codeninja
  Mar 28 at 1:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @codeninja Now works
  
  – George C.
  Mar 28 at 1:56
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GeorgeC. Nope, still same issue :/
  
  – Software Ninja
  Mar 28 at 1:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @GeorgeC. I created a stackblitz. Check it out stackblitz.com/edit/…
  
  – Software Ninja
  Mar 28 at 2:05
  
  

  
  
  
  

add a comment | 

Try this 👍

.html

<input placeholder="Search users here" (keyup)="searchTerm$.next($event.target.value)"/>

.ts

import Observable from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';


export class SearchbarComponent implements OnInit

 searchTerm$ = new Subject<string>(); // <==== new

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.searchTerm$.subscribe( term => 
 this.searchService.getSearchResults(q)
 )
 

share|improve this answer

edited Mar 28 at 1:56

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

<input placeholder="Search users here" (keyup)="searchTerm$.next($event.target.value)"/>

import Observable from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';


export class SearchbarComponent implements OnInit

 searchTerm$ = new Subject<string>(); // <==== new

 constructor(private searchService: SearchbarService) 

 ngOnInit() 
 this.searchTerm$.subscribe( term => 
 this.searchService.getSearchResults(q)
 )
 

share|improve this answer

edited Mar 28 at 1:56

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

answered Mar 28 at 1:15

George C.George C.

1,78833 gold badges2424 silver badges5353 bronze badges

0

I have create a working example base in your code the only difference between yours and mine is the service check mine

@Injectable()
export class SearchbarService 

 constructor() 

 public getSearchResults(value) 
 const arr = [1,2,3,4,5,6]
 return of([...arr.map(c=> Math.floor(Math.random() * 100))]); // return an observable
 

stackblitz demo

share|improve this answer

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

add a comment | 

0

I have create a working example base in your code the only difference between yours and mine is the service check mine

@Injectable()
export class SearchbarService 

 constructor() 

 public getSearchResults(value) 
 const arr = [1,2,3,4,5,6]
 return of([...arr.map(c=> Math.floor(Math.random() * 100))]); // return an observable
 

stackblitz demo

share|improve this answer

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

add a comment | 

I have create a working example base in your code the only difference between yours and mine is the service check mine

@Injectable()
export class SearchbarService 

 constructor() 

 public getSearchResults(value) 
 const arr = [1,2,3,4,5,6]
 return of([...arr.map(c=> Math.floor(Math.random() * 100))]); // return an observable
 

stackblitz demo

share|improve this answer

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

@Injectable()
export class SearchbarService 

 constructor() 

 public getSearchResults(value) 
 const arr = [1,2,3,4,5,6]
 return of([...arr.map(c=> Math.floor(Math.random() * 100))]); // return an observable
 

share|improve this answer

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges

answered Mar 28 at 2:21

malbarmawimalbarmawi

8,88233 gold badges2020 silver badges4444 bronze badges