如何在垫表内进行两种方式绑定垫日期选择器

Question

我正在尝试在垫子桌上展示一名员工的一些详细信息。我制作的同一张表是可编辑的。除了日期选择器，每个字段都在工作。因为日期选择器值是相同的（数组中的最后一个元素），因为它正在循环。请帮助在日期选择器中进行双向绑定。

<ng-container matColumnDef="Exp">
    <mat-header-cell *matHeaderCellDef> Total Exp.(Yrs.) </mat-header-cell>
        <mat-cell contenteditable=true [textContent]="row.totalexp_yrs" (input)="row.totalexp_yrs=$event.target.textContent" *matCellDef="let row">
           {{row.totalexp_yrs}} 
        </mat-cell>
</ng-container>

<ng-container matColumnDef="startdate">
    <mat-header-cell *matHeaderCellDef> Start Date </mat-header-cell>
    <mat-cell contenteditable=true *matCellDef="let row;let i=index">
        <input matInput [matDatepicker]="empfrom_i" name="empfrom_i" placeholder="Choose a date">{{row.emp_from}} </input>
        <mat-datepicker-toggle matSuffix [for]="empfrom_i"></mat-datepicker-toggle>
        <mat-datepicker #empfrom_i></mat-datepicker>
    </mat-cell>
</ng-container>

<ng-container matColumnDef="enddate">
    <mat-header-cell *matHeaderCellDef> End Date </mat-header-cell>
    <mat-cell contenteditable=true *matCellDef="let row">
        <input matInput [matDatepicker]="empto_i" name="empto" [(ngModel)]="row.emp_to" placeholder="Choose a date">
        <mat-datepicker-toggle matSuffix [for]="empto_i"></mat-datepicker-toggle>
        <mat-datepicker #empto_i></mat-datepicker>
        {{row.emp_to}}
    </mat-cell>
</ng-container>

Answer 1

我不知道其他人是怎么做到的，但我是结合使用 [value] 属性和 (dateInput) 发射器来做到的。

<mat-cell contenteditable=true *matCellDef="let x">
     <input matInput [matDatepicker]="y" [value]="x.effectiveDate" name="empto" placeholder="Choose a date" (dateInput)="OnDateChange(x.fieldName, $event.value)">
     <mat-datepicker-toggle matSuffix [for]="y"></mat-datepicker-toggle>
     <mat-datepicker #y></mat-datepicker>
</mat-cell>

因此，在我的示例中，我有一个集合，在我的例子中，“键”是“fieldName”，所以我知道表中的哪一行获得了更新日期。因此，即使我使用 [(value)] 设置为双向，该值也将不起作用。但是我可以使用“OnDateChange”的事件发射器，它可以捕获日期更改的事件。在这种情况下，我只想要发射事件的“值”。

OnDateChange(name: string, eventDate: Date) {
    const margin: MarginDiffernce = this.marginChanges[this.marginChanges.findIndex(x => x.fieldName === name)];
    margin.effectiveDate = eventDate;
}

在此示例中，我有一个“marginChanges”集合，只需要查找日期何时从集合中的键更改。然后更新字段。