Question

我需要将我的primeng数据表的空单元格默认为＆＃39; - ＆＃39;。任何人都可以分享。

假设我的数据是：

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

我的primeng列配置如下：

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

但是，以下内容不适用于＆＃34;列＆＃34; 并不总是应该拥有属性＆＃34; name＆＃34; 。以下内容将此栏目的所有字段变为＆＃39; - ＆＃39;，无论其是否具有＆＃34; name＆＃34;或不。

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

如何：

您需要创建自定义管道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 : '-');
  }
}

将您的竖线添加到您应用的声明中，以便可以使用：

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

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

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

我没有创建完全正常工作的代码段，因为我没有在代码段提供程序中找到Angular2作为可能的依赖项。

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

1 个答案: