如何切換功能內部組件

在我的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

如何切換功能內部組件

回答

相關問題