Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sysmat opened this issue Oct 3, 2024 · 2 comments

Comments

@sysmat
Copy link

sysmat commented Oct 3, 2024

  • 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
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants