angular - Hur man fyller på standard -(bindestreck) i tomma celler

Jag behöver att standardvärdet för tomma celler i min primeng-datatable ska vara '-'. Kan någon dela hur man gör.

Anta att mina data är:

[
{
 'column': null
},
{
 'column': {
  'name': 'A'
 }
},
{
 'column': {
  'name': 'B'
 }
},
{
 'column': null
}
]

Min primeng-kolumnkonfiguration ser ut så här:

{  
 field: 'column.name',
 header: 'Name',
 sortable: true
}

Men nedanstående fungerar inte eftersom "column" inte alltid förväntas ha egenskapen "name". Och nedanstående sätter alla mina fält i denna kolumn till '-', oavsett om den har "name" eller inte.

 <p-column [field]="col.field" [header]="col.header" [sortable]="col.sortable">
     <template let-col let-data="rowData" pTemplate="body">
         {{data[col.field] ? data[col.field] : "-"}}
     </template>
 </p-column>

Snälla hjälp!

Svar #1

Jag använde en Angular2-anpassad pipe för detta.

Hur man:

1. Du kommer att behöva skapa ett anpassat filter. Läs mer om hur här:

import {
  Pipe,
  PipeTransform
} from '@angular/core';
/*
 * If piped value is falsy, default to given default value or - (hyphen)
 * Takes an defaultValue argument that defaults to - (hyphen).
 * Usage:
 *   value | defaultTo:'N/A'
 * Example:
 *   {{ orders.attributes?.first_name | defaultTo}}
 *   formats to: -
 *
 * Written by Henrik Peinar 06/04/2017
 */
@Pipe({
  name: 'defaultTo'
})
export class DefaultToPipe implements PipeTransform {
  public transform(value: string, defaultValue?: string): string {
    return (value) ? value : (defaultValue !== undefined ? defaultValue : '-');
  }
}

2. Lägg till din pipe i din apps deklarationer så att den blir tillgänglig för användning:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
// ... other imports ...
import { DefaultToPipe } from './default-to.pipe';

@NgModule({
  imports:      [ BrowserModule, HttpModule],
  declarations: [ AppComponent, DefaultToPipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3. Använd din nyss skapade pipe i någon av dina mallar på följande sätt:

<tr *ngFor="let order of orderList">
      <td>{{order.order_number}}</td>
      <td>{{order.phone | defaultTo:'No phone'}}</td>
      <td>{{order.shipping_address?.first_name | defaultTo}}</td>
      <td>{{order.shipping_address?.last_name  | defaultTo}}</td>
</tr>

Jag skapade inte en fullständigt fungerande kodsnutt eftersom jag inte hittade Angular2 som ett möjligt beroende i kodsnuttsleverantören.