如何切换功能内部组件

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

下面是该ngSwitch在我grid component代码：

<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我保存/更新功能：

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

这里是我的rowSelected代码：

rowSelected: number; 
isRowSelected(i: number) { 
    return i == this.rowSelected; 
} 

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

来源

2017-06-21 asdf

你能最少显示你的ngSwitch代码吗？ – Zircon

@Zircon更新了原始帖子 – asdf

我更新了我的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 switch语句中r row-edit

来源

2017-06-21 19:48:29 asdf

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

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

你应该简单地给你的每一行一个“选定”的值，根据发生的情况动态改变。如果你点击一行，它应该将他们的“selected”值设置为“true”，并将先前选择的行的“selected”值设置为“false”（或者如果你想同时选择多行）。此外，当您按下“保存”按钮时，只需将您所在行的“选定”值切换为“false”即可。

此外，如果您使用的是真/假断言，您应该使用*ngIf/Else而不是ngSwitch。有多种不同状态时应使用ngSwitch。

来源

2017-06-21 18:33:35 snaplemouton

[Plunker]（https://plnkr.co/edit/kz28mOveXdUaTabgPfKj?p=preview）以显示* ngIf/Else – snaplemouton

我已更新我的原始帖子，并附上了代码我的SelectRow。但是，我的保存函数与'ngSwitch'的位置不同。 – asdf

您可以使用[@Output]（https://angular.io/guide/component-interaction#parent-listens-for-child-event）属性将值从子组件传递给父项。 – snaplemouton

如何切换功能内部组件

回答

相关问题