I'm using ng2-redux and I'm trying to show a list of phrases/words. In the following code sample, you can see that I use the @select decorator to grab the words/phrases and put it into the phrases$ observable.

Going from the official ng-redux tutorial, I am able to display the array as-is by using the async pipe operator. So if the store for the phrases look like this ['one', 'two', 'three'] the output is something like this: one, two, three. This is what that code looks like:

import { Component, OnInit } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-typing',
  template: `
    <h2>List of Phrases</h2>
    <div>{{ phrases$ | async }}</div>
  `,
})
export class TypingComponent implements OnInit {

  @select('phrase') phrases$: Observable<number>;

  constructor() {}

  ngOnInit() {}

}

But my goal is not to display the words in a single line. I would like to display the words with *ngFor so I could do more plex styling on them. So, instead of {{ phrases$ | async }}, maybe something like this:

<div *ngFor="let phrase in phrases$">
  <div>{{phrase}}</div>
<div>

But this doesn't work, because phrases$ is an observable and not an array. How can I change what I have above so that I can iterate over the array itself?

I'm using ng2-redux and I'm trying to show a list of phrases/words. In the following code sample, you can see that I use the @select decorator to grab the words/phrases and put it into the phrases$ observable.

Going from the official ng-redux tutorial, I am able to display the array as-is by using the async pipe operator. So if the store for the phrases look like this ['one', 'two', 'three'] the output is something like this: one, two, three. This is what that code looks like:

import { Component, OnInit } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-typing',
  template: `
    <h2>List of Phrases</h2>
    <div>{{ phrases$ | async }}</div>
  `,
})
export class TypingComponent implements OnInit {

  @select('phrase') phrases$: Observable<number>;

  constructor() {}

  ngOnInit() {}

}

But my goal is not to display the words in a single line. I would like to display the words with *ngFor so I could do more plex styling on them. So, instead of {{ phrases$ | async }}, maybe something like this:

<div *ngFor="let phrase in phrases$">
  <div>{{phrase}}</div>
<div>

But this doesn't work, because phrases$ is an observable and not an array. How can I change what I have above so that I can iterate over the array itself?

• javascript
• angular
• typescript

1 Answer 1

If phrases$ emits an array, the type seems to be incorrect. Should it not be:

@select('phrase') phrases$: Observable<number[]>;

If it does emit an array, you can use the async pipe like this:

<div *ngFor="let phrase in phrases$ | async">
  <div>{{phrase}}</div>
<div>