Page 1 of 1
Display custom message if data[col.field] is empty
Posted: 12 Apr 2021, 19:37
by maxjp
Hi everyone !
Here is the code I'll talk about :
Code: Select all
<ng-template pTemplate="body" let-content let-columns="columns">
<tr [pSelectableRow]="content" (dblclick)="onDoubleClick(content)">
<td *ngFor="let col of columns">
{{ content[col.field] }}
</td>
</tr>
</ng-template>
This is a table with rows representing college thesis. One column for example, has the Header "Keyword".
Let's say, in my content[col.field], there are no keywords at all. In the current state, the column will just be blank.
But I'd like to have a random message saying "empty" if there is nothing to show.
I've tried :
Code: Select all
{{ content[col.field] !== ' ' ? content[col.field] : 'empty' }}
This doesn't work, and I can't find anywhere a correct way to do that, based on content[col.field] in my case.
Any help would be welcomed !
Re: Display custom message if data[col.field] is empty
Posted: 01 May 2021, 03:35
by PhilHuhn
Maybe:
Code: Select all
{{ content[col.field] !== '' || content[col.field] !== undefined ? content[col.field] : 'empty' }}
Re: Display custom message if data[col.field] is empty
Posted: 02 May 2021, 15:11
by PhilHuhn
Hey This was harder than I originally thought. You can use ngIf/else also. I used StackBlitz to create the following:
Code: Select all
<p-table [columns]="cols" [value]="products">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
<span *ngIf='rowData[col.field] !== undefined || rowData[col.field] !== ""'>{{ rowData[col.field] }}</span>
<span *ngIf='rowData[col.field] === undefined || rowData[col.field] === ""'> - </span>
</td>
</tr>
</ng-template>
</p-table>
<p-table [columns]="cols" [value]="products">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
<div *ngIf='rowData[col.field] === undefined || rowData[col.field] === ""; else elseBlock'> - </div>
<ng-template #elseBlock>{{rowData[col.field]}}</ng-template>
</td>
</tr>
</ng-template>
</p-table>
Code: Select all
import { Component, OnInit } from '@angular/core';
import { Product } from './product';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
products: Product[];
cols: any[];
constructor( ) { }
ngOnInit() {
this.products = [
{ code: '1', name: 'p 1', category: 'cat 1', quantity: 1 },
{ code: '2', name: 'p 1', category: '', quantity: 1 },
{ code: '3', name: 'p 1', category: 'cat 1', quantity: 1 },
{ code: '4', name: 'p 1', category: 'cat 5', quantity: undefined },
{ code: '5', name: 'p 1', category: undefined, quantity: 22 }
];
this.cols = [
{ field: 'code', header: 'Code' },
{ field: 'name', header: 'Name' },
{ field: 'category', header: 'Category' },
{ field: 'quantity', header: 'Quantity' }
];
}
}