我有一个 mat-table 显示日期、时间段之前和时间段之后的列。HTML代码:-
<ng-container
matColumnDef="{{ column }}"
*ngFor="let column of columnsToDisplay"
>
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let element">
{{ element[column] }}
</td>
</ng-container>
Run Code Online (Sandbox Code Playgroud)
打字稿代码:
columnsToDisplay = [
'executionDate',
'previousTimePeriod',
'afterTimePeriod'
];
executionDate: string = new Date().toISOString().slice(0, 10);
Run Code Online (Sandbox Code Playgroud)
如果我使用管道{{ element[column] | date: 'yyyy-MM-dd'}}将字符串类型的日期显示为日期类型,那么我将无法看到时间段之前和之后。如何仅将日期查看为“yyyy-MM-dd”
我有一个 mat-table,用于显示行列表。我有一个添加新按钮,用户可以通过该按钮手动添加一行。工作 Stackblitz:https ://stackblitz.com/edit/angular-axjzov-8zmcnp 我想要突出显示新插入的行 2-3 秒的选项,以便用户可以看到新创建的行。我如何实现这一目标?
我有一个垫标签,显示客户结束日期。我最初对API进行GET请求时获得结束日期。假设结束日期是16-05-2099。我按原样显示结束日期。现在我有一个删除按钮,它可以进行软删除。这意味着它不会删除详细信息,只是将结束日期更改为当前日期,即今天的日期。
最初,我以如下方式显示我的详细信息:
<div *ngIf="showContact; else editableContact">
<div *ngFor="let element of sampleData1.contact">
<div *ngIf="contact.toString() === element.contactType" [attr.data-status]="element.contactStatus">
<br />
<mat-label hidden>Contact Id: {{ element.contactId }}</mat-label>
<mat-label>Contact Sub Type: {{ element.contactSubType }}</mat-label>
<br />
<mat-label>Contact Reference Type:{{ element.referenceNumber }} </mat-label>
<br />
<mat-label>Agreement Id : [</mat-label>
<mat-label *ngFor="let agreementIds of element.agreementId"> {{ agreementIds + ' ' }} </mat-label>
<mat-label>]</mat-label>
<br />
<mat-label>Contact Last Verified Date: {{ element.lastVerifiedDate | date: 'dd/MM/yyyy' }}</mat-label>
<br />
<mat-label>Contact End Date:{{ element.endDate | date: 'dd/MM/yyyy' }}</mat-label>
</div> …Run Code Online (Sandbox Code Playgroud)我有一个显示工作列表的垫表。现在,当我创建一个新作业时,我想将它显示在第一行而不是最后一行。如果我创建并添加一个新作业,它会显示在 mat-table 的底部。我怎样才能做到这一点。
我想要类似于这个Stackblitz 的东西。但不是在底部添加行,我希望它在第一行
我有一个带有扩展行的垫子表。如果我单击一行,它会展开并显示一个硬编码的字符串。我想在展开的行内显示另一个表格。是否可以?或者,是否有任何其他技术或方法可以实现我正在尝试做的事情。我正在尝试显示给定时间段内已执行作业的列表。在主行上,我只想显示类似 01-01-2017 到 01-05-2017 的时间段,当用户单击该行时,它将展开并显示包含其他详细信息(如日期、时间、用户)的作业列表,状态等。将显示
HTML代码:-
<mat-table [dataSource]="jobExecutionStat">
<!-- Id Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef>
Serial Number
</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index"
>{{ i + 1 }}
</mat-cell>
</ng-container>
<!-- Execution Date Column -->
<ng-container matColumnDef="executionDate">
<mat-header-cell *matHeaderCellDef>
Execution Date
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.executionDate | date: 'yyyy-MM-dd' }}
</mat-cell>
</ng-container>
<!-- After Time Period Column -->
<ng-container matColumnDef="afterTimePeriod">
<mat-header-cell *matHeaderCellDef>
Current Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.afterTimePeriod }}
</mat-cell>
</ng-container>
<!-- Previous …Run Code Online (Sandbox Code Playgroud) 我创建了一个 mat-table 来显示工作列表。现在我想添加一个 mat-filter 来使用 date 或 JobId 搜索工作。但是,我编写的代码似乎不起作用。它不会抛出任何错误,也不会过滤数据。
HTML代码:
<mat-form-field>
<input
matInput
(keyup)="applyFilter($event.target.value)"
placeholder="Search"
/>
</mat-form-field>
<mat-table [dataSource]="jobExecutionList">
...
Run Code Online (Sandbox Code Playgroud)
打字稿代码:
jobExecutionList: any = [];
applyFilter(filterValue: string) {
this.jobExecutionList.filter = filterValue.trim().toLowerCase();
}
Run Code Online (Sandbox Code Playgroud)
整个打字稿文件:
import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from "@angular/material";
import { GlobalAppSateService } from "../../services/globalAppSate.service";
import { DataService } from "../../services/data.service";
import { SnakBarComponent } from "../custom-components/snak-bar/snak-
bar.component";
import { DataSource } from "@angular/cdk/collections";
import { Observable, of } from "rxjs";
import { …Run Code Online (Sandbox Code Playgroud)