I bought the this theme https://www.primefaces.org/diamond-ng/#/.
When I use p-table with observable datasource. I get following error for three times. When I subscribe the data source it works.
Code: Select all
RROR NullInjectorError: R3InjectorError(t)[x -> x -> x -> x -> x -> x]:
NullInjectorError: No provider for x!
at Fd.get (main.js:1:370577)
at Hd.get (main.js:1:373263)
at Hd.get (main.js:1:373263)
at Hd.get (main.js:1:373263)
at Hd.get (main.js:1:373263)
at Hd.get (main.js:1:373263)
at Hd.get (main.js:1:373263)
at A_.get (main.js:1:397967)
at na (main.js:1:357057)
at Ao (main.js:1:357534)
Prime Ng version: 4.1.2
My Code
Code: Select all
<p-table #dt1
dataKey="id"
[value]="empList$ | async"
[loading]="loader$ | async"
[rowHover]="true"
[globalFilterFields]="['partyRole.party.fullName',
'position.name','partyRole.party.email','partyRole.party.phoneNumber','partyRole.externalId']"
responsiveLayout="scroll">
<ng-template pTemplate="caption">
<div class="flex justify-content-between flex-column sm:flex-row">
<span class="p-input-icon-left mb-2">
<i class="pi pi-search"></i>
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)"
placeholder="Search Keyword" class="w-full"/>
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
<div class="flex justify-content-between align-items-center"
[style]="{color:'#0d3c61'}">
name
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data>
<tr>
<td>{{data.name}}</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="7">No customers found.</td>
</tr>
</ng-template>
<ng-template pTemplate="loadingbody">
<tr>
<td colspan="7">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table>
I tried following code it's the same
Code: Select all
<ng-container *ngIf="{empList:empList$ | async , loader:loader$ | async} as data">
<p-card class="col-12">
<h5>{{'settings.personal.personalList.personalList' | transloco}}</h5>
<p-table #dt1
dataKey="id"
[value]="data.empList"
[loading]="data.loader"
[rowHover]="true"
[globalFilterFields]="['partyRole.party.fullName',
'position.name','partyRole.party.email','partyRole.party.phoneNumber','partyRole.externalId']"
responsiveLayout="scroll">
<ng-template pTemplate="caption">
<div class="flex justify-content-between flex-column sm:flex-row">
<span class="p-input-icon-left mb-2">
<i class="pi pi-search"></i>
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)"
placeholder="Search Keyword" class="w-full"/>
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
<div class="flex justify-content-between align-items-center"
[style]="{color:'#0d3c61'}">
name
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data>
<tr>
<td>{{data.name}}</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="7">No customers found.</td>
</tr>
</ng-template>
<ng-template pTemplate="loadingbody">
<tr>
<td colspan="7">Loading customers data. Please wait.</td>
</tr>
</ng-template>
</p-table>
</p-card>
</ng-container>
Thank You