Type 'number' is not assignable to type 'NgIterable<any>' when trying to a-CodePudding

I have this minimal component:

import { Component, VERSION } from '@angular/core';
import { Observable, Observer } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular '   VERSION.major;

  private counter = 1;

  data$ = new Observable<number>((observer: Observer<number>) => {
    setInterval(() => {
      observer.next(this.counter);
      this.counter  ;
    }, 1000);
  });

  constructor() {}
}

And I'm trying to get the numbers asynchronously like:

<div *ngFor="let d of data$ | async">{{ d }}</div>

However I get the error Type 'number' is not assignable to type 'NgIterable<any>'.

To my understanding this is not that different from the angular heroes tutorials HeroSearchComponent.

Can anyone point me in the right direction?

Thx!

CodePudding user response：

*ngFor directive used for iterating array of values. In your code you were using *ngFor to iterate a single primitive value, that's why you are getting this error Type 'number' is not assignable to type 'NgIterable<any>'.

If you want to get single value you can use ngIf along with async pipe

 <div *ngIf="data$ | async as d">{{ d }}</div>