NgFor on Observable failed

[deft sequoia]

Hello, I do not undestand why this simple ngfor give me a error on html, I used async pipe. https://github.com/JasminDeVisbe/angular-ivy-ts-strict-enabled-itj126/blob/main/src/app/app.component.html

[spring jungle]

myObservableArray$: Observable<MyDataType[]> = of();

of() does not emit an iterable value

@Component({
  template: `
<div *ngFor="let item of myObservableArray$ | async">
  {{ item.value }}
</div>
`,
})
export class AppComponent {
  public readonly myObservableArray$: Observable<MyDataType[]>;

  constructor(private myService: MyService) {
    this.myObservableArray$ = this.myService.getData();
  }
}

But IMPO, .getData() should be .data$ because a method would create new Observables every time invoked which would be poor design.