angular - 如何在垫子表内做两种方式绑定(bind)垫子日期选择器

Question

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

<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”的集合，只需要找出集合中某个键的日期何时发生变化。然后更新字段。