NG8: Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator.

[sysmat]

• angular 18.2
• "dexie": "^4.0.8",
• this lib can not be used in angular ngFor or @for

<div *ngFor="let todoList of todoLists$ | async; trackBy: identifyList">
  <itemlist [todoList]="todoList"></itemlist>
</div>
todoLists = liveQuery(() => db.todoLists.toArray());

[instantgis]

That's not true...

export class ProjectsComponent implements OnInit {
public readonly db: AppDB = inject(AppDB);
projects$ = liveQuery(() => db.projects.toArray());

...

<p-table
responsiveLayout="scroll"
[scrollable]="true"
scrollHeight="flex"
[value]="(projects$ | async)!"
[selectionMode]="'single'"
...

[instantgis]

However I cannot get it to work with returning a single row in this context. This is what I am doing now:

export class ProjectCatalogPageComponent implements OnInit {
  public readonly db: AppDB = inject(AppDB);
  @Input() id!: string;
  project$!: Observable<Project[]>;

...

I need onInit be cause id is a route parameter...

  ngOnInit(): void {
    if (this.id) {
      this.project$ = from(
        liveQuery(() => this.db.projects.where('id').equals(this.id).toArray())
      );
    }
  }

...
Then I have to use...

<p-card>
  <ng-template pTemplate="header" class="mt-1">
    <div class="flex flex-row">
      <input
        type="text"
        pInputText
        [(ngModel)]="**project[0].name**"
        placeholder="Project Name"
        class="ml-3"
      />
      <p-button icon="pi pi-save" [text]="true" (onClick)="saveProject()"
      [disabled]="project[0].name?.trim()?.length === 0" />
    </div>
  </ng-template>

...

But I really would prefer to use...

project$!: Observable<Project>

and

      this.project$ = from(
        liveQuery(() => this.db.projects.where('id').equals(this.id).first())
      );

then...

      <input
        type="text"
        pInputText
        [(ngModel)]="project.name"
        placeholder="Project Name"
        class="ml-3"
      />

Since I am pulling a single project.

But I cannot get it to do that. Typescript barks at me :(
Anyone has any ideas I'd be glad to know, thanks.

[eebyjo]

Hi @sysmat,

I found a solution for this issue on ChatGPT. The problem is that liveQuery returns an Observable that is not fully compatible with Angular's async pipe when used with directives like *ngFor. Here's the workaround:

import { liveQuery } from "dexie";
import { from } from "rxjs";
import { map } from "rxjs/operators";

this.todoLists$ = from(
  liveQuery(() => db.todoLists.toArray())
).pipe(
  map(data => Array.isArray(data) ? data : []) // Ensure the output is an array
);