Angular 8 : result fetched from reducer using ngRx/store is not updating the UI in async (html)

1 answer
My issue is similar to <https://stackoverflow.com/questions/53123304/angular-using-ngrx-store-and-pipe-async-not-get-update-in-the-dom>. 

import { Component, OnDestroy, OnInit } from '@angular/core';  import { Store } from '@ngrx/store';  import { Observable, Subscription } from 'rxjs';  import { Ingredient } from '../shared/ingredient.model';  import { ShoppingListService } from './shopping-list.service';      @Component({    selector: 'app-shopping-list',    templateUrl: './shopping-list.component.html',    styleUrls: ['./shopping-list.component.css']  })  export class ShoppingListComponent implements OnInit, OnDestroy {    ingredients: Observable<{ ingredients: Ingredient[] }>;    private subscription: Subscription;      constructor(      private slService: ShoppingListService,      private store: Store<{ shoppingList: { ingredients: Ingredient[] } }>    ) {}      ngOnInit() {      this.ingredients = this.store.select('shoppingList');    }      onEditItem(index: number) {      this.slService.startedEditing.next(index);    }      ngOnDestroy() {      // this.subscription.unsubscribe();    }  }
<div class="row">    <div class="col-xs-10">      <app-shopping-edit></app-shopping-edit>      <hr>      <ul class="list-group">        <a          class="list-group-item"          style="cursor: pointer"          *ngFor="let ingredient of (ingredients | async).ingredients; let i = index"          (click)="onEditItem(i)"        >          {{ ingredient.name }} ({{ ingredient.amount }})        </a>      </ul>    </div>  </div>      {    "name": "ng-complete-guide-update",    "version": "0.0.0",    "scripts": {  "ng": "ng",  "start": "ng serve",  "build": "ng build",  "test": "ng test",  "lint": "ng lint",  "e2e": "ng e2e"    },    "private": true,    "dependencies": {  "@angular/animations": "^8.0.0",  "@angular/common": "^8.0.0",  "@angular/compiler": "^8.0.0",  "@angular/core": "^8.0.0",  "@angular/forms": "^8.0.0",  "@angular/platform-browser": "^8.0.0",  "@angular/platform-browser-dynamic": "^8.0.0",  "@angular/router": "^8.0.0",  "@ngrx/store": "^8.0.0-beta.2",  "bootstrap": "3.3.7",  "core-js": "^3.1.2",  "firebase": "^7.12.0",  "rxjs": "^6.0.0",  "tslib": "^1.9.0",  "zone.js": "^0.8.26"    },    "devDependencies": {  "@angular-devkit/build-angular": "~0.803.25",  "@angular/cli": "^8.0.0",  "@angular/compiler-cli": "^8.0.0",  "@angular/language-service": "^8.0.0",  "@types/node": "~8.9.4",  "@types/jasmine": "~2.8.8",  "@types/jasminewd2": "~2.0.3",  "codelyzer": "^5.0.1",  "jasmine-core": "~2.99.1",  "jasmine-spec-reporter": "~4.2.1",  "karma": "~4.0.0",  "karma-chrome-launcher": "~2.2.0",  "karma-coverage-istanbul-reporter": "~2.0.1",  "karma-jasmine": "~1.1.2",  "karma-jasmine-html-reporter": "^0.2.2",  "protractor": "~5.4.0",  "ts-node": "~7.0.0",  "tslint": "~5.11.0",  "typescript": "3.4.5"    }  }

The async in html fails with error : ingredients of undefined. If i try to subscribe in ngOninit,to set the ingredients a property in a class.it still fails with undefined in subscription.

i have upgraded all the dependencies.The author of the tutorial is not getting this issue though when i try ,it fails to fetch set data from reducers to UI though i can see the values in debug mode.

When i searched for an answer,all i get is issue with zone.As i am new to this not sure how to resolve.

https://github.com/DineshNO/ng4-complete-guide.git

All answers to this question, which has the identifier 60858787

The best answer:

   {    "name": "ng4-complete-guide",    "version": "0.0.0",    "license": "MIT",    "scripts": {      "ng": "ng",      "start": "ng serve",      "build": "ng build --prod",      "test": "ng test",      "lint": "ng lint",      "e2e": "ng e2e"    },    "private": true,    "dependencies": {      "@angular/animations": "^4.4.0-RC.0",      "@angular/common": "^4.4.0-RC.0",      "@angular/compiler": "^4.4.0-RC.0",      "@angular/core": "^4.4.0-RC.0",      "@angular/forms": "^4.4.0-RC.0",      "@angular/http": "^4.4.0-RC.0",      "@angular/platform-browser": "^4.4.0-RC.0",      "@angular/platform-browser-dynamic": "^4.4.0-RC.0",      "@angular/router": "^4.4.0-RC.0",      "@ngrx/effects": "^4.0.3",      "@ngrx/router-store": "^4.0.3",      "@ngrx/store": "^4.0.3",      "@ngrx/store-devtools": "^4.0.0",      "bootstrap": "^3.4.1",      "core-js": "^2.5.1",      "firebase": "^4.2.0",      "rxjs": "^5.4.2",      "zone.js": "^0.8.17"    },    "devDependencies": {      "@angular/cli": "^1.4.0",      "@angular/compiler-cli": "^4.4.0-RC.0",      "@angular/language-service": "^4.4.0-RC.0",      "@angular/platform-server": "^4.4.0-RC.0",      "@types/jasmine": "^2.8.3",      "@types/jasminewd2": "^2.0.2",      "@types/node": "^8.0.27",      "acorn": "^7.1.1",      "codelyzer": "^3.1.1",      "jasmine-core": "~2.8.0",      "jasmine-spec-reporter": "~4.2.1",      "karma": "~2.0.0",      "karma-chrome-launcher": "~2.2.0",      "karma-coverage-istanbul-reporter": "^1.2.1",      "karma-jasmine": "~1.1.0",      "karma-jasmine-html-reporter": "^0.2.2",      "protractor": "~5.1.2",      "ts-node": "~4.1.0",      "tslint": "~5.9.1",      "typescript": "~2.5.3"    }  }

My new package json with which async works. Will upgrade to Angualar 8 along with others later. thanks.

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data