Модифицировать DateTime, получаемый из ответа, и отображать только дату в mat-таблице. - PullRequest
Новая
       15

Модифицировать DateTime, получаемый из ответа, и отображать только дату в mat-таблице.

0 голосов
/ 02 февраля 2020

Я сейчас использую mat-table, чтобы показать мой ответ API. Но на дату, время также прилагается. Я хочу опустить часть времени и показать только дату в таблице mat. Как этого добиться?

enter image description here

service.ts 

getNotifications() {
    const token = this.authService.getToken();
    let headerOptions = new HttpHeaders({
      'Content-Type': 'application/json',
            'Accept': 'application/json',
      'Authorization': 'Bearer '+token
    });

    const url = environment.baseURL + 'notifications';

    return this.http.get<any>(url, {headers: headerOptions})
      .pipe(map(notifications => {
        return notifications.result;
      }));
  }

Component.ts 

getNotifications(){     
    this.notificationService.getNotifications()
            .pipe(first())
            .subscribe(
                data => {
                  this.notifications = <Notification[]>data;
                  this.dataSource = new MatTableDataSource();
                  this.dataSource.data = data;
                  this.dataSource.paginator = this.paginator;
                },
                error => {
                  console.log("An Error Occurred");
                });
  }

Ответ API:

enter image description here

Обновленный раздел:

компонент. html

    <section class="container-fluid pwb-section-body">
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z1 pwb-table">

                <!--- Note that these columns can be defined in any order.
                  The actual rendered columns are set as a property on the row definition" -->


                <!-- Name Column -->
                <ng-container matColumnDef="title">
                    <th mat-header-cell *matHeaderCellDef style="width: 30%;"> Title </th>
                    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="description">
                    <th mat-header-cell *matHeaderCellDef style="width: 40%;"> Body Text </th>
                    <td mat-cell *matCellDef="let element"> {{element.description}} </td>
                </ng-container>

<ng-container matColumnDef="created_at">
                <th mat-header-cell *matHeaderCellDef style="width: 10%;"> Start Date </th>
                <td mat-cell *matCellDef="let element"> {{element.created_at}} </td>
            </ng-container>


                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
        </section>

1 Ответ

1 голос
/ 02 февраля 2020

Вы можете использовать DatePipe, чтобы сделать преобразование, в вашем component.ts

import { DatePipe } from '@angular/common';

и вставить в ваш конструктор 

(private datePipe: DatePipe)

и использовать его в HTML as, 

 <span class="ah-admin-value">{{datePipe.transform({element.created_at,"dd/MM/yyyy hh:mm")}}</span>
...