Angular2: Rendering data from Observables

user2227400

Following interpolation

{{ (__responseData | async)?.calculation | json }}

outputs following structure

[
    {
        "gross": 26.625834,
        "net": 20.425833,
        "tax": 6.2000003
    }
]

How can I get gross?

{{ (__responseData | async)?.calculation[0].gross }}

does not work, and the all the following trys don't work too:

{{ (__responseData.calculation[0] | async)?.gross }}
{{ (__responseData.calculation.[0].gross  | async) }}

What's the mistake?

EDIT: As workaround I use flatmap (this.__responseData.flatMap((data: any) => data.calculation);) but I would like to have an elegant solution,..

user2227400

That's the answer from Alexander (Angular2-Github-Platform)

You could use *ngFor="let calculation of calculations | async"

@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `
    <div *ngFor="let calculation of calculations | async">
      Gross: {{ calculation.gross }}<br>
      Net: {{ calculation.net }}
    </div>
  `,
  directives: [NgFor]
})
export class App {
  calculations: Observable<{gross:number; net:number}[]>;

  constructor(private _http: Http) {
    this.calculations = this._http.get("./data.json")
                            .map(res => res.json().calculation)
  }
}

http://plnkr.co/edit/3ze70dYycQxNyXA286mX?p=preview

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Chaining RxJS Observables from http data in Angular2 with TypeScript

From Dev

What is the proper way to handle concatenation of data returned from multiple http observables in angular2/4 rxjs?

From Dev

Prevent error rendering to View when waiting for Async / REST data from a Service - RxJS / Angular2

From Dev

Angular2 HTTP using observables subscribe showing data undefined

From Dev

Nested Observables in Angular2 using AngularFire2 not rendering in view

From Dev

Nested Observables in Angular2 using AngularFire2 not rendering in view

From Dev

Observables in Angular2

From Java

Angular2: How to load data before rendering the component?

From Dev

Angular2 component not rendering when data changes

From Dev

Angular2 component not rendering when data changes

From Dev

Angular2 Observable not rendering until data changed

From Dev

Angular2 Merging observables

From Dev

Angular2 Observables -- Replay

From Dev

How to fetch the property data from RESTful API using Angular 2 by observables?? Soory, I am new to this

From Dev

Angular2 HTTP POST using observables subscribe shows data as 'undefined'

From Dev

Template is not rendering in Angular2

From Dev

Angular2 and AWS Lambda: How to load data before rendering the component

From Dev

Chaining observables with RxJS in Angular2

From Dev

Specification of Observables in TypeScript with Angular2

From Dev

q.all for angular2 observables

From Dev

Angular2 observables vs. promises

From Dev

Angular2 is this the right way to use Observables?

From Dev

Rendering data from an array of objects

From Dev

Rails Rendering the data from DB

From Dev

Rendering single data from an array

From Java

How to use angular observables to retrieve data from API within a repetitive time interval

From Dev

Angular - View isn't updating in feature module 100% of the times when setting data from Observables

From Dev

async/await prevents Angular2 from rendering the component when used in template statement

From Dev

Copying response data from rxJs in Angular2/Typescript

Related Related

  1. 1

    Chaining RxJS Observables from http data in Angular2 with TypeScript

  2. 2

    What is the proper way to handle concatenation of data returned from multiple http observables in angular2/4 rxjs?

  3. 3

    Prevent error rendering to View when waiting for Async / REST data from a Service - RxJS / Angular2

  4. 4

    Angular2 HTTP using observables subscribe showing data undefined

  5. 5

    Nested Observables in Angular2 using AngularFire2 not rendering in view

  6. 6

    Nested Observables in Angular2 using AngularFire2 not rendering in view

  7. 7

    Observables in Angular2

  8. 8

    Angular2: How to load data before rendering the component?

  9. 9

    Angular2 component not rendering when data changes

  10. 10

    Angular2 component not rendering when data changes

  11. 11

    Angular2 Observable not rendering until data changed

  12. 12

    Angular2 Merging observables

  13. 13

    Angular2 Observables -- Replay

  14. 14

    How to fetch the property data from RESTful API using Angular 2 by observables?? Soory, I am new to this

  15. 15

    Angular2 HTTP POST using observables subscribe shows data as 'undefined'

  16. 16

    Template is not rendering in Angular2

  17. 17

    Angular2 and AWS Lambda: How to load data before rendering the component

  18. 18

    Chaining observables with RxJS in Angular2

  19. 19

    Specification of Observables in TypeScript with Angular2

  20. 20

    q.all for angular2 observables

  21. 21

    Angular2 observables vs. promises

  22. 22

    Angular2 is this the right way to use Observables?

  23. 23

    Rendering data from an array of objects

  24. 24

    Rails Rendering the data from DB

  25. 25

    Rendering single data from an array

  26. 26

    How to use angular observables to retrieve data from API within a repetitive time interval

  27. 27

    Angular - View isn't updating in feature module 100% of the times when setting data from Observables

  28. 28

    async/await prevents Angular2 from rendering the component when used in template statement

  29. 29

    Copying response data from rxJs in Angular2/Typescript

HotTag

Archive