Angular 7 uI not updated after subscribe returns valuesAngular HTML bindingWhat is the equivalent of ngShow and ngHide in Angular?Huge number of files generated for every Angular projectWhat is the best way to return a hot/shared observable after a http call in angular 2Angular 2 local variable is undefined Outside MethodAngular 4 view is not updating when model is changedAngular CanDeactivate Router Guard with an Observable Subscribed ValueAngular Observable issue : How to make the view wait for the most recent valueHow to mock/spy an imported function in Angular unit testingAngular 6 String Interpolation not updating with value inside .subscribe()

Open a doc from terminal, but not by its name

How much character growth crosses the line into breaking the character

Is there a conventional notation or name for the slip angle?

Folder comparison

Has Darkwing Duck ever met Scrooge McDuck?

THT: What is a squared annular “ring”?

Reply 'no position' while the job posting is still there

Varistor? Purpose and principle

How can "mimic phobia" be cured or prevented?

Are all species of CANNA edible?

How to color a curve

What is this type of notehead called?

Is camera lens focus an exact point or a range?

When quoting, must I also copy hyphens used to divide words that continue on the next line?

Is it improper etiquette to ask your opponent what his/her rating is before the game?

Aligning individual characters/glyphs like a monospace font

Translation of Scottish 16th century church stained glass

Visiting the UK as unmarried couple

Is it possible to use .desktop files to open local pdf files on specific pages with a browser?

How will losing mobility of one hand affect my career as a programmer?

Fly on a jet pack vs fly with a jet pack?

Should I install hardwood flooring or cabinets first?

What (else) happened July 1st 1858 in London?

API Access HTML/Javascript



Angular 7 uI not updated after subscribe returns values


Angular HTML bindingWhat is the equivalent of ngShow and ngHide in Angular?Huge number of files generated for every Angular projectWhat is the best way to return a hot/shared observable after a http call in angular 2Angular 2 local variable is undefined Outside MethodAngular 4 view is not updating when model is changedAngular CanDeactivate Router Guard with an Observable Subscribed ValueAngular Observable issue : How to make the view wait for the most recent valueHow to mock/spy an imported function in Angular unit testingAngular 6 String Interpolation not updating with value inside .subscribe()













0















In respect to the following code, it would appear that the UI is not updated with the value, yet, I can see the value being set to the field correct.



I have tried 2 different approached, bar have not tried the change detection approach as I believe the one in the code below, should work.



In my service, I listen for the route end event, the reason for this is, that something in the service needs to be changed depending on the existence of a parameter in my route, eg: '/page/:id'.



In one scenario, the the URL might be /page, in another, the /page/12, so based on this fact, I need to return the value from two different services, if the ID does not exist, use SERVICE1 otherwise use SERVICE2.



I basically have a subscribe that returns the value from another subscribe. To do this, I'm relying on Subscribe to emit the value from the inner subscribe, which works (see the examples below). My pain here is, that the UI does not render the values.



MAIN SERVICE



Note: omitted the full class for brevity, just to show the method in question:



 get getCourse(): Observable<CoursesDTO> 
let subject = new Subject<CoursesDTO>();

this.router.events.pipe(filter(e => e instanceof NavigationEnd))
.subscribe(x =>

let course: CoursesDTO =
courseName: '',
courseId: ''
;

const route = this.router.routerState.snapshot.root;

let courseId: string = '';

if (route.children.length >= 1)
const obj = route.children[route.children.length - 1];
const value = (obj.params as any).value;

// we have a courseID, interact with the course workflow
if (!_.isEmpty(value))
this.courseWorkflowProxy.interact(value.courseId, 'CourseMaterial', null)
.subscribe((b: InteractionResponseDTO) =>

const x: CourseDTO = <any>b.workflowResult;

course =
courseName: x.courseName,
courseId: x.courseId
;

subject.next(course);
subject.complete();

return course; // I don't feel this is necessary
);



// we don't have the courseID, so assume there is a JWT token
// for example, that authenticated the user + courseID
// and we can get this in the code behind
this.coursesProxy
.getCourseInfo()
.subscribe(b =>

course =
courseName: b.courseName,
courseId: b.courseid
;

subject.next(course);
subject.complete();

return course; // I don't feel this is necessary
);
);

return subject;



Please note, this code has been modified to represent the code, not an "actual" scenario, if this feels wrong, is for demonstration of the code.



The implementation of this method, in a component called WatchBlock.ts, showing one of the possible fixes I tried, via ngZone:



this.whatBlockService.getCourse.subscribe((r: CourseDTO) => 
this._ngZone.run(() =>
this.title = r.courseName;
this.id = r.courseId;

console.dir( title: this.title, id: this.id ); // this prints the values to the console
);
);


The following code blocks "works" in the sense that it returns the values I'm looking for, however, as stated, it does not appear in the rendered HTML.



The HTML file:



 <div fxLayout="row" fxLayoutAlign="start center">
<div class="ml-16">
<label class="identi">id</label>
</div>
</div>

<div class="px-8 px-mat-16">
<span class="mat-title">title</span>
</div>


data_returned



I have tried the BehaviorSubject approach as well, and that did not work for me either.



I didn't try the change detector route, as I feel that ngZone should be doing the change detection itself, if I understand how zoning works.



I can't figure this out, and would appreciate any help from the gurus out there.










share|improve this question




























    0















    In respect to the following code, it would appear that the UI is not updated with the value, yet, I can see the value being set to the field correct.



    I have tried 2 different approached, bar have not tried the change detection approach as I believe the one in the code below, should work.



    In my service, I listen for the route end event, the reason for this is, that something in the service needs to be changed depending on the existence of a parameter in my route, eg: '/page/:id'.



    In one scenario, the the URL might be /page, in another, the /page/12, so based on this fact, I need to return the value from two different services, if the ID does not exist, use SERVICE1 otherwise use SERVICE2.



    I basically have a subscribe that returns the value from another subscribe. To do this, I'm relying on Subscribe to emit the value from the inner subscribe, which works (see the examples below). My pain here is, that the UI does not render the values.



    MAIN SERVICE



    Note: omitted the full class for brevity, just to show the method in question:



     get getCourse(): Observable<CoursesDTO> 
    let subject = new Subject<CoursesDTO>();

    this.router.events.pipe(filter(e => e instanceof NavigationEnd))
    .subscribe(x =>

    let course: CoursesDTO =
    courseName: '',
    courseId: ''
    ;

    const route = this.router.routerState.snapshot.root;

    let courseId: string = '';

    if (route.children.length >= 1)
    const obj = route.children[route.children.length - 1];
    const value = (obj.params as any).value;

    // we have a courseID, interact with the course workflow
    if (!_.isEmpty(value))
    this.courseWorkflowProxy.interact(value.courseId, 'CourseMaterial', null)
    .subscribe((b: InteractionResponseDTO) =>

    const x: CourseDTO = <any>b.workflowResult;

    course =
    courseName: x.courseName,
    courseId: x.courseId
    ;

    subject.next(course);
    subject.complete();

    return course; // I don't feel this is necessary
    );



    // we don't have the courseID, so assume there is a JWT token
    // for example, that authenticated the user + courseID
    // and we can get this in the code behind
    this.coursesProxy
    .getCourseInfo()
    .subscribe(b =>

    course =
    courseName: b.courseName,
    courseId: b.courseid
    ;

    subject.next(course);
    subject.complete();

    return course; // I don't feel this is necessary
    );
    );

    return subject;



    Please note, this code has been modified to represent the code, not an "actual" scenario, if this feels wrong, is for demonstration of the code.



    The implementation of this method, in a component called WatchBlock.ts, showing one of the possible fixes I tried, via ngZone:



    this.whatBlockService.getCourse.subscribe((r: CourseDTO) => 
    this._ngZone.run(() =>
    this.title = r.courseName;
    this.id = r.courseId;

    console.dir( title: this.title, id: this.id ); // this prints the values to the console
    );
    );


    The following code blocks "works" in the sense that it returns the values I'm looking for, however, as stated, it does not appear in the rendered HTML.



    The HTML file:



     <div fxLayout="row" fxLayoutAlign="start center">
    <div class="ml-16">
    <label class="identi">id</label>
    </div>
    </div>

    <div class="px-8 px-mat-16">
    <span class="mat-title">title</span>
    </div>


    data_returned



    I have tried the BehaviorSubject approach as well, and that did not work for me either.



    I didn't try the change detector route, as I feel that ngZone should be doing the change detection itself, if I understand how zoning works.



    I can't figure this out, and would appreciate any help from the gurus out there.










    share|improve this question


























      0












      0








      0








      In respect to the following code, it would appear that the UI is not updated with the value, yet, I can see the value being set to the field correct.



      I have tried 2 different approached, bar have not tried the change detection approach as I believe the one in the code below, should work.



      In my service, I listen for the route end event, the reason for this is, that something in the service needs to be changed depending on the existence of a parameter in my route, eg: '/page/:id'.



      In one scenario, the the URL might be /page, in another, the /page/12, so based on this fact, I need to return the value from two different services, if the ID does not exist, use SERVICE1 otherwise use SERVICE2.



      I basically have a subscribe that returns the value from another subscribe. To do this, I'm relying on Subscribe to emit the value from the inner subscribe, which works (see the examples below). My pain here is, that the UI does not render the values.



      MAIN SERVICE



      Note: omitted the full class for brevity, just to show the method in question:



       get getCourse(): Observable<CoursesDTO> 
      let subject = new Subject<CoursesDTO>();

      this.router.events.pipe(filter(e => e instanceof NavigationEnd))
      .subscribe(x =>

      let course: CoursesDTO =
      courseName: '',
      courseId: ''
      ;

      const route = this.router.routerState.snapshot.root;

      let courseId: string = '';

      if (route.children.length >= 1)
      const obj = route.children[route.children.length - 1];
      const value = (obj.params as any).value;

      // we have a courseID, interact with the course workflow
      if (!_.isEmpty(value))
      this.courseWorkflowProxy.interact(value.courseId, 'CourseMaterial', null)
      .subscribe((b: InteractionResponseDTO) =>

      const x: CourseDTO = <any>b.workflowResult;

      course =
      courseName: x.courseName,
      courseId: x.courseId
      ;

      subject.next(course);
      subject.complete();

      return course; // I don't feel this is necessary
      );



      // we don't have the courseID, so assume there is a JWT token
      // for example, that authenticated the user + courseID
      // and we can get this in the code behind
      this.coursesProxy
      .getCourseInfo()
      .subscribe(b =>

      course =
      courseName: b.courseName,
      courseId: b.courseid
      ;

      subject.next(course);
      subject.complete();

      return course; // I don't feel this is necessary
      );
      );

      return subject;



      Please note, this code has been modified to represent the code, not an "actual" scenario, if this feels wrong, is for demonstration of the code.



      The implementation of this method, in a component called WatchBlock.ts, showing one of the possible fixes I tried, via ngZone:



      this.whatBlockService.getCourse.subscribe((r: CourseDTO) => 
      this._ngZone.run(() =>
      this.title = r.courseName;
      this.id = r.courseId;

      console.dir( title: this.title, id: this.id ); // this prints the values to the console
      );
      );


      The following code blocks "works" in the sense that it returns the values I'm looking for, however, as stated, it does not appear in the rendered HTML.



      The HTML file:



       <div fxLayout="row" fxLayoutAlign="start center">
      <div class="ml-16">
      <label class="identi">id</label>
      </div>
      </div>

      <div class="px-8 px-mat-16">
      <span class="mat-title">title</span>
      </div>


      data_returned



      I have tried the BehaviorSubject approach as well, and that did not work for me either.



      I didn't try the change detector route, as I feel that ngZone should be doing the change detection itself, if I understand how zoning works.



      I can't figure this out, and would appreciate any help from the gurus out there.










      share|improve this question
















      In respect to the following code, it would appear that the UI is not updated with the value, yet, I can see the value being set to the field correct.



      I have tried 2 different approached, bar have not tried the change detection approach as I believe the one in the code below, should work.



      In my service, I listen for the route end event, the reason for this is, that something in the service needs to be changed depending on the existence of a parameter in my route, eg: '/page/:id'.



      In one scenario, the the URL might be /page, in another, the /page/12, so based on this fact, I need to return the value from two different services, if the ID does not exist, use SERVICE1 otherwise use SERVICE2.



      I basically have a subscribe that returns the value from another subscribe. To do this, I'm relying on Subscribe to emit the value from the inner subscribe, which works (see the examples below). My pain here is, that the UI does not render the values.



      MAIN SERVICE



      Note: omitted the full class for brevity, just to show the method in question:



       get getCourse(): Observable<CoursesDTO> 
      let subject = new Subject<CoursesDTO>();

      this.router.events.pipe(filter(e => e instanceof NavigationEnd))
      .subscribe(x =>

      let course: CoursesDTO =
      courseName: '',
      courseId: ''
      ;

      const route = this.router.routerState.snapshot.root;

      let courseId: string = '';

      if (route.children.length >= 1)
      const obj = route.children[route.children.length - 1];
      const value = (obj.params as any).value;

      // we have a courseID, interact with the course workflow
      if (!_.isEmpty(value))
      this.courseWorkflowProxy.interact(value.courseId, 'CourseMaterial', null)
      .subscribe((b: InteractionResponseDTO) =>

      const x: CourseDTO = <any>b.workflowResult;

      course =
      courseName: x.courseName,
      courseId: x.courseId
      ;

      subject.next(course);
      subject.complete();

      return course; // I don't feel this is necessary
      );



      // we don't have the courseID, so assume there is a JWT token
      // for example, that authenticated the user + courseID
      // and we can get this in the code behind
      this.coursesProxy
      .getCourseInfo()
      .subscribe(b =>

      course =
      courseName: b.courseName,
      courseId: b.courseid
      ;

      subject.next(course);
      subject.complete();

      return course; // I don't feel this is necessary
      );
      );

      return subject;



      Please note, this code has been modified to represent the code, not an "actual" scenario, if this feels wrong, is for demonstration of the code.



      The implementation of this method, in a component called WatchBlock.ts, showing one of the possible fixes I tried, via ngZone:



      this.whatBlockService.getCourse.subscribe((r: CourseDTO) => 
      this._ngZone.run(() =>
      this.title = r.courseName;
      this.id = r.courseId;

      console.dir( title: this.title, id: this.id ); // this prints the values to the console
      );
      );


      The following code blocks "works" in the sense that it returns the values I'm looking for, however, as stated, it does not appear in the rendered HTML.



      The HTML file:



       <div fxLayout="row" fxLayoutAlign="start center">
      <div class="ml-16">
      <label class="identi">id</label>
      </div>
      </div>

      <div class="px-8 px-mat-16">
      <span class="mat-title">title</span>
      </div>


      data_returned



      I have tried the BehaviorSubject approach as well, and that did not work for me either.



      I didn't try the change detector route, as I feel that ngZone should be doing the change detection itself, if I understand how zoning works.



      I can't figure this out, and would appreciate any help from the gurus out there.







      angular ngzone






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 8 at 7:28







      PeculiarJoe

















      asked Mar 8 at 7:08









      PeculiarJoePeculiarJoe

      62




      62






















          1 Answer
          1






          active

          oldest

          votes


















          0














          Actually, no, running code in NgZone does not ensure the change detector will detect changes. If the component or any parent component is set to ChangeDetectionStrategy.OnPush, it will only check inputs. If you do not call zone.runOutsideAngular, there's (usually) no need to run ngZone.run.



          But you can try injecting private _changeDetectorRef: ChangeDetectorRef and calling this._changeDetectorRef.markForCheck() in the component subscribe callback. markForCheck marks the component as changed manually when OnPush strategy is used. Docs






          share|improve this answer






















            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


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55058340%2fangular-7-ui-not-updated-after-subscribe-returns-values%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            Actually, no, running code in NgZone does not ensure the change detector will detect changes. If the component or any parent component is set to ChangeDetectionStrategy.OnPush, it will only check inputs. If you do not call zone.runOutsideAngular, there's (usually) no need to run ngZone.run.



            But you can try injecting private _changeDetectorRef: ChangeDetectorRef and calling this._changeDetectorRef.markForCheck() in the component subscribe callback. markForCheck marks the component as changed manually when OnPush strategy is used. Docs






            share|improve this answer



























              0














              Actually, no, running code in NgZone does not ensure the change detector will detect changes. If the component or any parent component is set to ChangeDetectionStrategy.OnPush, it will only check inputs. If you do not call zone.runOutsideAngular, there's (usually) no need to run ngZone.run.



              But you can try injecting private _changeDetectorRef: ChangeDetectorRef and calling this._changeDetectorRef.markForCheck() in the component subscribe callback. markForCheck marks the component as changed manually when OnPush strategy is used. Docs






              share|improve this answer

























                0












                0








                0







                Actually, no, running code in NgZone does not ensure the change detector will detect changes. If the component or any parent component is set to ChangeDetectionStrategy.OnPush, it will only check inputs. If you do not call zone.runOutsideAngular, there's (usually) no need to run ngZone.run.



                But you can try injecting private _changeDetectorRef: ChangeDetectorRef and calling this._changeDetectorRef.markForCheck() in the component subscribe callback. markForCheck marks the component as changed manually when OnPush strategy is used. Docs






                share|improve this answer













                Actually, no, running code in NgZone does not ensure the change detector will detect changes. If the component or any parent component is set to ChangeDetectionStrategy.OnPush, it will only check inputs. If you do not call zone.runOutsideAngular, there's (usually) no need to run ngZone.run.



                But you can try injecting private _changeDetectorRef: ChangeDetectorRef and calling this._changeDetectorRef.markForCheck() in the component subscribe callback. markForCheck marks the component as changed manually when OnPush strategy is used. Docs







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 8 at 7:39









                kvetiskvetis

                1,6561227




                1,6561227





























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55058340%2fangular-7-ui-not-updated-after-subscribe-returns-values%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

                    2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

                    Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme