ngIf show basé sur la valeur déroulante - Angular 2

Question

J'ai un composant parent qui contient deux composants différents. Dans le composant "projet" (enfant), j'ai une liste déroulante à partir de laquelle l'utilisateur peut choisir n'importe quel projet disponible.

Ce dont j'ai besoin, c'est d'autres composants à créer avec ngIf quand un projet est sélectionné dans une liste déroulante.

Comme vous pouvez le voir d'ici, j'ai déjà placé ngIf dans le composant parent pour les composants que je veux être affectés.

<div class="tab tab-style"> 

<ribbon-item style="width:10%;" [title]="'Load/Save Project'"> 
    <project></project> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

<ribbon-item style="width:12%;" [title]="'Project settings'" *ngIf="showComponent"> 
    <project-settings></project-settings> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

<ribbon-item style="width:23%;" [title]="'Environment'" *ngIf="showComponent"> 
    <environment></environment> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

<ribbon-item class="pd-width" [title]="'Project dates'" *ngIf="showComponent"> 
    <project-dates></project-dates> 
</ribbon-item> 
<div class="ribbon-divider"></div> 

Et c'est composante "projet" avec menu déroulant.

<div class="button-wrapper"> 
<select #projectSelect class="custom-select custom-select-project" (change)="loadProject(projectSelect.value)"> 
    <option selected disabled>Open projects</option> 
    <option *ngFor="let project of projects" [value]=project.id>{{project.name}}</option> 
</select> 

<button class="btn-main" (click)="createNewProject()">New project</button> 
<button class="btn-main">Save project</button> 
<button class="btn-main">Save as</button> 

Comment puis-je vérifier lorsque l'utilisateur choisir un projet, puis montrer d'autres composants parent.

Answer 1

Vous pouvez utiliser la sortie de votre composant de projet. Le flux sera défini comme suit:

Étape 1. changement de composant parent pour le composant de projet:

`<project (projectSelected) = "projectSelected($event)"></Project>` 

Étape 2: Dans votre composant de projet défini la variable de sortie comme:

@Output() projectSelected: EventEmitter<number> = new EventEmitter<number>(); 

Étape 3: Dans loadProject AJOUTZ ligne:

this.projectSelected.emit(id); // selected value from dropdown 

étape 4: en fonction définie comme composant parent:

projectSelected(projectId) { 
this.showComponent = true; 
}