如何将默认 -（连字符）填充到空单元格

Question

我需要将primeng 数据表的空单元格默认为“-”。谁能分享一下方法。

假设我的数据是：

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

我的primeng列配置如下：

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

但是，下面的内容不能作为 "column" 并不总是应该具有属性 "name"。下面将我在此列的所有字段都变为“-”，无论它是否具有“名称”。

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

请帮忙！

Answer 1

我为此使用了Angular2 custom pipe。

如何：

1. 您需要创建一个自定义管道read more about how here：

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 : '-');
  }
}

1. 将管道添加到应用的声明中，以便使用：

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 { }

1. 在任何模板中使用新创建的管道，如下所示：

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

我没有创建完整工作的 sn-p，因为我没有发现 Angular2 作为 sn-p 提供程序中可能的依赖项。