Angular2: Utilisation de deux mêmes composants enfants dans le parent

Question

Je souhaite que ma page affiche deux onglets, chacun contenant une table. Étant donné que la structure des tables est la même, j'ai créé un composant personnalisé pour une table et l'ai utilisé comme composant enfant. page Parent:

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

Mon composant personnalisé:

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

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

Le problème est que la table est été mis à jour (ngOnChanges est appelé) que lorsque variable1 est modifié, et non pas quand variable2 est changé. Pourquoi? De même, lorsque ngOnChanges est exécuté pour variable1 que table2 a également été mis à jour. Alors, quel est le problème? Je veux que chaque table soit indépendante, comment puis-je y parvenir?

Merci d'avance.

Answer 1

Problème 1:

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

ici, il devrait être [éléments] = "variable1".

Problème 2:

Si ci-dessus est par erreur que vous avez saisi tort. Comme vous avez utilisé ici les onglets primeng pour montrer deux tables, utilisez un booléen pour afficher/masquer la datatable en fonction de l'onglet click. ce code ne conduira pas à des problèmes.

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