Angular 基于下拉值的ngIf显示-角度2

我有一个包含两个不同组件的父组件。 在“项目”组件（子）中，我有一个下拉列表，用户可以从中选择任何可用的项目

我需要的是当从下拉列表中选择任何项目时，使用ngIf创建其他组件

<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>

从这里可以看到，我已经在父组件中为我想要受影响的组件放置了ngIf

<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>

这是带有下拉菜单的“项目”组件

<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>

开放项目
{{project.name}
新项目
保存项目
另存为

---

如何检查用户何时选择任何项目，然后在父级中显示其他组件。

您可以使用项目组件的输出。 流量定义如下：

第一步。项目组件的父组件更改为：

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

步骤4：在父组件中，将功能定义为：

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

---

您有不同的子组件（所有同级），如果其中一个子组件中的下拉列表具有特定值，您希望显示这些子组件，是吗？是的，就像：）…这样可以吗<代码>加载项目（id）{this.projectService.getById（id）.subscribe（响应=>{this.projectService.projectLoaded$.emit（响应）}，错误=>{console.error（error）；}）；this.answerChanged.emit（$event.value）；}我收到一个错误，answerChanged没有定义，找不到名称“$event”@pritesh agrawalm我的错误我从本地代码复制了这个addAswer，它应该是projectSelected，您也可以使用id。我更新了答案。如果我想做同样的事情，但要隐藏其他组件，这不是同级，我应该更改什么？

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