Open sysmat opened 3 weeks 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'" ...
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.
@for