dexie / Dexie.js

A Minimalistic Wrapper for IndexedDB
https://dexie.org
Apache License 2.0
11.59k stars 642 forks source link

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

Open sysmat opened 3 weeks ago

sysmat commented 3 weeks ago
<div *ngFor="let todoList of todoLists$ | async; trackBy: identifyList">
  <itemlist [todoList]="todoList"></itemlist>
</div>
todoLists = liveQuery(() => db.todoLists.toArray());
instantgis commented 1 week ago

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 commented 1 week ago

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.