Question

在我的Angular项目中，我有它，以便在grid component中有ngSwitch表示如果没有选择行，则默认选项为row display component，其中可以查看显示的数据，如果选择了行，则切换到row edit component，您可以在其中编辑数据。我还在row edit component中实施了一个接受按钮，以便在您完成更改后保存更改。我无法找到的方法是在更新已更新的行之后恢复为row display component。我该怎么做呢？

以下是grid component的{{1}}代码：

ngSwitch

然后这是<ng-container *ngFor="let pto of (ptoData | currentEmployee:empInfo[selectedEmployee].EmpKey); let i = index"> <ng-container [ngSwitch]="isRowSelected(i)"> <ng-container *ngSwitchCase="false"> <ng-container *ngIf="pto.type === selectedType"> <tr pto-row-display [pto]="pto" (click)="selectRow(i)"></tr> </ng-container> </ng-container> <ng-container *ngSwitchCase="true"> <tr pto-row-edit [pto]="pto" (onDelete)="onDelete($event)" *ngIf="pto.type === selectedType"></tr> </ng-container> </ng-container> </ng-container>中的保存/更新功能：

row edit component

这是我的rowSelected代码：

saveRow(p : PTOData): void {
    this.ptodataService.update(p) 
}

Answer 1

我将row-edit component更新为：

@Input() rowSelected: number;
@Output() onSave = new EventEmitter<number>();

saveRow(p: PTOData): void {
    //save function code
    this.rowSelected = null;
    this.onSave.emit(this.rowSelected);
}

然后，在我的按钮上附加了保存功能，我添加了(onSave)="onSave($event)"

我将grid component更新为：

onSave(i: number) { this.rowSelected = null; }

最后，我在[rowSelected]="rowSelected" (onSave)="onSave($event)"

的switch语句中添加了row-edit

Answer 2

如果您希望动态更改组件，可以使用dynamic component loader。

但是我理解它的方式，你有一个行列表，当选择时需要可编辑。在这种情况下，您不需要使用动态组件加载器。

你应该简单地给你的每一行＆＃34;选择＆＃34;根据发生的情况动态改变的值。如果你点击一行，它应该设置他们的＆＃34;选择＆＃34;价值为＆＃34;真＆＃34;并设置＆＃34;选择＆＃34;先前选择的行的值为＆＃34; false＆＃34; （或者如果您想同时选择多行，则不是这样）。此外，当您按下＆＃34;保存＆＃34;按钮，只需切换＆＃34;选择＆＃34;行的值为＆＃34; false＆＃34;。

此外，如果您使用的是类似于您的情况的真/假断言，则应使用*ngIf/Else而不是ngSwitch。当存在多种不同的状态时，应使用ngSwitch。

如何在功能内部切换组件

2 个答案: