Using an array from Observable Object with ngFor and Async Pipe Angular 2

Question

I am trying to understand how to use Observables in Angular 2   I have this service  import  Injectable  EventEmitter  ViewChild  from   angular core   import  Observable  from  quot rxjs Observable quot   import  Subject  from  quot rxjs Subject quot   import  BehaviorSubject  from  quot rxjs Rx quot   import  Availabilities  from    availabilities-interface    Injectable   export class AppointmentChoiceStore       public  appointmentChoices  BehaviorSubject lt Availabilities gt    new BehaviorSubject lt Availabilities gt    quot availabilities quot          quot length quot   0        constructor           getAppointments             return this asObservable this  appointmentChoices            asObservable subject  Subject lt any gt             return new Observable fn   gt  subject subscribe fn             This BehaviorSubject is pushed new values as so from another service  that  appointmentChoiceStore  appointmentChoices next parseObject   I subscribe to it in the form of an observable in the component I want to display it in  import  Component  OnInit  AfterViewInit  from   angular core  import  AppointmentChoiceStore  from     shared appointment-choice-service  import  Observable  from  rxjs Observable  import  Subject  from  rxjs Subject  import  BehaviorSubject  from  quot rxjs Rx quot   import  Availabilities  from     shared availabilities-interface    declare const moment  any   Component       selector   my-appointment-choice       template  require    appointmentchoice-template html        styles   require    appointmentchoice-style css         pipes   CustomPipe      export class AppointmentChoiceComponent implements OnInit  AfterViewInit       private  nextFourAppointments  Observable lt string   gt           constructor private  appointmentChoiceStore  AppointmentChoiceStore            this  appointmentChoiceStore getAppointments   subscribe function value                this  nextFourAppointments   value                     And the attempt to display in the view as so     lt li  ngFor  quot  appointment of  nextFourAppointments availabilities   async quot  gt            lt div class  quot text-left appointment-flex quot  gt   appointment   date   EEE    uppercase    However  availabilities isn t yet a property of the observable object so it errors out  even though I define it in the availabilities interface as so  export interface Availabilities      quot availabilities quot   string       quot length quot   number    How can I display an array asynchronously from an observable object with the async pipe and  ngFor   The error message I get is  browser adapter js 77 ORIGINAL EXCEPTION  TypeError  Cannot read property  availabilties  of undefined

User · Answer

Who ever also stumbles over this post    I belive is the correct way      lt div  ngFor  let appointment of   nextFourAppointments   async  availabilities   gt        lt div gt    appointment    lt  div gt     lt  div gt

User · Answer

If you don t have an array but you are trying to use your observable like an array even though it s a stream of objects  this won t work natively   I show how to fix this below assuming you only care about adding objects to the observable  not deleting them   If you are trying to use an observable whose source is of type BehaviorSubject  change it to ReplaySubject then in your component subscribe to it like this   Component  this messages    this chatService messages  pipe scan  acc  val    gt      acc  val           Html   lt div class  message-list   ngFor  let item of messages    async  gt

User · Answer

I think what u r looking for is this    lt article  ngFor  let news of  news    async   articles  gt   lt h4 class  head  gt   news title   lt  h4 gt   lt div class  desc  gt    news description   lt  div gt   lt footer gt        news author    lt  footer gt

User · Answer

Here s an example     in the service getVehicles        return Observable interval 2200  map i  gt    name   car 1    name   car 2           in the controller vehicles  Observable lt Array lt any gt  gt  ngOnInit         this vehicles   this  vehicleService getVehicles          in template  lt div  ngFor  let vehicle of vehicles   async  gt        vehicle name    lt  div gt

[typescript] Using an array from Observable Object with ngFor and Async Pipe Angular 2

Examples related to typescript

Examples related to angular

Examples related to rxjs

Examples related to observable