Question

我尝试使用效果很好的角度材料表。我唯一的问题是我无法调用为单元格生成值的函数。

这是我的代码的一部分：

 <table mat-table [dataSource]="actuals"   *ngIf="actuals?.length > 0">

          <!-- Column Delivery Date -->
          <ng-container matColumnDef="deliveryDate" cdkColumnDef="deliveryDate">
            <th mat-header-cell *matHeaderCellDef >Datum</th>
            <td mat-cell *matCellDef="let element"> {{element.deliveryDate}} </td>
          </ng-container>
          
          <!-- Add header and rows -->
          <tr mat-header-row *matHeaderRowDef="['deliveryDate']"></tr>
          <tr mat-row *matRowDef="let row; columns: ['deliveryDate']"></tr>
</table>

数据源“ actuals”是“ Actual”对象的数组，如下所示：

import {Time} from "@angular/common";

export class Actual {
  id: number;
  coworkerName: string;
  taskCodeId: string;
  deliveryDate: Date;
  startTime: Time;
  endTime: Time;
  hours: number;
  comment: string;
  uploadType: string;
  modUser: string;
  modDate: Date;
  modComment: string;
  modStatus: string;

  constructor(id: number, coworkerName: string, taskCodeId: string, deliveryDate: Date, startTime: Time, endTime: Time, hours: number, comment: string, uploadType: string, modUser: string, modDate: Date, modComment: string, modStatus: string) {
    this.id = id;
    this.coworkerName = coworkerName;
    this.taskCodeId = taskCodeId;
    this.deliveryDate = deliveryDate;
    this.startTime = startTime;
    this.endTime = endTime;
    this.hours = hours;
    this.comment = comment;
    this.uploadType = uploadType;
    this.modUser = modUser;
    this.modDate = modDate;
    this.modComment = modComment;
    this.modStatus = modStatus;
  }
}

所以一切正常。但是现在我不想打

{{element.deliveryDate}}

作为值-相反，我想调用一个函数。例如

{{ element.deliveryDate.getDate() }}
<!-- Or -->
{{ doSomething(element) }}

但是当我这样做时，我总是收到类似

的错误消息

>ERROR TypeError: _v.context.$implicit.deliveryDate.getDate is not a function
>>    at Object.eval [as updateRenderer] (ActualsComponent.html:50)
>>    at Object.debugUpdateRenderer [as updateRenderer] (core.js:22503)
>>    at checkAndUpdateView (core.js:21878)
>>    at callViewAction (core.js:22114)
>>    at execEmbeddedViewsAction (core.js:22077)
>>    at checkAndUpdateView (core.js:21874)
>>    at callViewAction (core.js:22114)>
>>    at execComponentViewsAction (core.js:22056)
>>    at checkAndUpdateView (core.js:21879)
>>    at callViewAction (core.js:22114)

那我做错了吗？

感谢您的帮助

Answer 1

您的错误消息说

deliveryDate.getDate不是函数

因此，它在您的typesrcipt类中不存在。

要调用mat-cell中的函数，请执行以下操作，它将在typescript类中调用名为doSomething（deliveryDate：Date）的函数。

<td mat-cell *matCellDef="let element"> {{doSomething(element.deliveryDate)}} </td>

然后在您的打字稿类中创建一个函数

  doSomething(deliveryDate: Date) {
  return "Delivery date is  " + deliveryDate;
  }

因此，在表格的每一行中，输出将显示为

交货日期为（来自数据源的日期）

Angular 6：mat-cell上的调用功能

1 个答案: