Как мне использовать Pipe (фильтр) для времени в Angular 5 проекта - PullRequest
0 голосов
/ 07 февраля 2019

Я работаю над угловым 5 проектом, и у меня есть успех в свидании Pipe, но я не знаю, как использовать Pipe (фильтр) для времени в моем угловом проекте.

Это мой компонент.ts file

import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { ManageRadioViewComponent } from './manage-radio-view.component';
import { DatePipe } from '@angular/common';

@Component({
 selector: 'app-manage-radio',
 templateUrl: './manage-radio.component.html',
 providers: [
 DatePipe
  ]
})
export class ManageRadioComponent extends AppComponentBase implements OnInit 
{

 @ViewChild('viewModal') viewModal: ManageRadioViewComponent;
 @ViewChild('tt') dataTable: Table;

 constructor(_injector: Injector, private _dataService: DataService, private 
 spinner: NgxSpinnerService, private dp: DatePipe ) { 
 super(_injector);
}

 public cols: any[] = [
   { field: "startDate" , header: 'Start Date', type: this.dp },
   { field: "endDate", header: 'End Date', type: this.dp },
   { field: 'startTime', header: 'Start Time'},
   { field: 'endTime', header: 'End Time'}
  ]

«Дата начала» и «Дата окончания» работает нормально, но я не могу найти способ передать «Время начала» и «Время окончания».

Ниже мой файл component.html.

<ng-template pTemplate="header">
                <tr>
                  <th>Actions</th>
                  <th *ngFor="let col of cols" pResizableColumn>{{col.header}}</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-data>
                <tr>
                  <td>
                    <button class="btn btn-success btn-sm" (click)="view(data.id)">
                      <i class="fa fa-list"></i>&nbsp; View
                    </button>
                  </td>
                  <td *ngFor="let col of cols">{{col.type ? col.type.transform(data[col.field], col.arg1, col.arg2, col.arg3, col.arg4) : data[col.field]}}</td>
                </tr>
              </ng-template>

Пожалуйста, помогите.

...