Angular2: Verwenden von zwei gleichen untergeordneten Komponenten im übergeordneten Element

Question

Ich möchte, dass auf meiner Seite 2 Registerkarten angezeigt werden, von denen jede eine Tabelle enthält. Da die Struktur der Tabellen identisch ist, habe ich eine benutzerdefinierte Komponente für eine Tabelle erstellt und diese als untergeordnete Komponente verwendet. Geordnete Seite:

<p-tabPanel> 
    <cutomComp #table1 [items]=>"variable1"</customComp> 
</<p-tabPanel> 
<p-tabPanel> 
    <cutomComp #table2 [items]="variable2"></customComp> 
</<p-tabPanel> 

Meine benutzerdefinierte Komponente:

<p-dataTable [value]="itemsForTable"> 
</p-dataTable> 

ngOnChanges(changes: SimpleChanges){ 
    //init itemsForTable from items 
} 

Das Problem ist, dass die Tabelle aktualisiert wird nur (ngOnChanges genannt wird), wenn variable1 geändert wird, und nicht, wenn variable2 geändert wird. Warum? Wenn ngOnChanges für Variable1 ausgeführt wird, wurde auch table2 aktualisiert. Also, was ist das Problem? Ich möchte, dass jeder Tisch unabhängig ist, wie kann ich das erreichen?

Vielen Dank im Voraus.

Answer 1

Problem 1:

<cutomComp #table1 **[items]=>"variable1"**</customComp> 

hier sollte es [Artikel] = "variable1" sein.

Problem 2:

Wenn oberhalb versehentlich Sie falsch getippt. Wenn Sie hier Priming Tabs verwenden, um zwei Tabellen anzuzeigen, verwenden Sie einen booleschen Wert, um die Datentabelle basierend auf dem Tab-Klick ein-/auszublenden. Dieser Code wird nicht zu Problemen führen.

<p-tabPanel> 
    <cutomComp #table1 *ngIf="showTable1" [items]="variable1"</customComp> 
</<p-tabPanel> 
<p-tabPanel> 
    <cutomComp #table2 *ngIf="showTable2" [items]="variable2"></customComp> 
</<p-tabPanel>