Question

我正在开发一个场景，我已经创建了一个可以插入任何html模板的表组件。我们可以将不同的数据传递给它并显示出来。

// table component 
<tbody *ngIf="tableData">

        <tr class="row">
            <td>{{ 'LABEL.DAY' | translate }}</td>
            <td *ngFor="let data of tableData.timesheetInputs.timesheetDays | dayfilterpipe:'DAY' ">
                <input [ngModel] ="data.amount" #day="ngModel" (keypress)="_keyPress($event)" (ngModelChange)="data.amount=$event" (ngModelChange)="timesheetHourChanged(data.amount,'DAY')" [disabled]="inputViewState && !isEditable" [ngClass]="{'is-invalidTimeEntry': (data.amount === '') || ((data.amount)%(0.25) != 0)  || (data.amount > 24) }" />

            </td>
            <td>{{totalDayHour}}</td>
        </tr>

        <tr class="row">
            <td>{{ 'LABEL.NIGHT' | translate }}</td>
            <td *ngFor="let data of tableData.timesheetInputs.timesheetDays | dayfilterpipe:'NIGHT' ">
                <input  [(ngModel)] ="data.amount" #day1="ngModel" (ngModelChange)="timesheetHourChanged(data.amount, 'NIGHT')" [disabled]="inputViewState && !isEditable" [ngClass]="{'is-invalidTimeEntry': (data.amount === '') || ((data.amount)%(0.25) != 0) || (data.amount > 8) }" />
            </td>
            <td>{{totalNightHour}}</td>
        </tr>

</tbody>

在父组件中，可以像这样调用它：

 //first component
 <timesheet-table [tableData]="weekData" #timesheetTable [inputViewState]="statusVisibility"></timesheet-table>

//second component
 <timesheet-table [tableData]="editableWeekData" #timesheetTable   [inputViewState]="statusVisibility" [isEditable]="editable"></timesheet-table>

我面临的问题是下表

 <timesheet-table [tableData]="editableWeekData" #timesheetTable [inputViewState]="statusVisibility" [isEditable]="editable"></timesheet-table>

可以对其进行编辑，通过更改任何单元格不应影响已禁用的第一个时间表表格组件。但不知怎的，它正在发生，每当我更改任何字段时，它在两个表中都会发生变化。

正确使用ngModel似乎有些问题。我可能错过了一些东西。

什么是避免此问题的最佳方法。我不想创建另一个组件。我想重用现有的表组件。

Answer 1

我认为weekData和editableWeekData是同一个对象实例。

如果你有像

这样的代码

this.weekData = [ /* some data */ ];
this.editableWeekData = this.weekData;

然后两个表将获得相同的数组。当一个表修改数组时，另一个表会看到这些更改，因为它是相同的数组（或对象）

作为一种解决方法，您需要深度克隆数据。另请参阅Deep clone in TypeScript (preserving types)

如何跨Angular 2 Table组件共享数据，以便每个组件可以拥有不同的数据，但只使用相同的表组件？

1 个答案: