小编Saa*_*med的帖子

如何在动态生成的 mat-table 中将字符串转换为日期类型

我有一个 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”

html javascript typescript angular

6
推荐指数
1
解决办法
5091
查看次数

如何在 mat-table angular 7 中突出显示新插入的行

我有一个 mat-table,用于显示行列表。我有一个添加新按钮,用户可以通过该按钮手动添加一行。工作 Stackblitz:https ://stackblitz.com/edit/angular-axjzov-8zmcnp 我想要突出显示新插入的行 2-3 秒的选项,以便用户可以看到新创建的行。我如何实现这一目标?

html typescript angular-material angular

5
推荐指数
1
解决办法
1947
查看次数

如何在不刷新页面的情况下更改Mat-Label的内容

我有一个垫标签,显示客户结束日期。我最初对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)

html javascript rest-client typescript angular

5
推荐指数
1
解决办法
79
查看次数

如何在垫表顶部插入新行

我有一个显示工作列表的垫表。现在,当我创建一个新作业时,我想将它显示在第一行而不是最后一行。如果我创建并添加一个新作业,它会显示在 mat-table 的底部。我怎样才能做到这一点。

我想要类似于这个Stackblitz 的东西。但不是在底部添加行,我希望它在第一行

javascript typescript angular-material angular

3
推荐指数
2
解决办法
7981
查看次数

我可以在 mat-expanded 行内显示另一个表格吗?

我有一个带有扩展行的垫子表。如果我单击一行,它会展开并显示一个硬编码的字符串。我想在展开的行内显示另一个表格。是否可以?或者,是否有任何其他技术或方法可以实现我正在尝试做的事情。我正在尝试显示给定时间段内已执行作业的列表。在主行上,我只想显示类似 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)

html javascript typescript angular-material angular

3
推荐指数
1
解决办法
1750
查看次数

过滤器不过滤 mat-table 中的数据

我创建了一个 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)

javascript typescript angular-material angular

2
推荐指数
1
解决办法
3201
查看次数