ngIf 根据下拉值显示 - Angular 2

Question

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

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

正如您从这里看到的，我已经将 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>

这是带下拉菜单的 "project" 组件。

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

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

Answer 1

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

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

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

第 2 步：在您的项目组件中将输出变量定义为：

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

第 3 步：在 loadProject 中添加以下行：

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

step-4：在父组件中定义函数为：

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

ngIf 根据下拉值显示 - Angular 2

ngIf show based on dropdown value - Angular 2

angular-ng-if

dropdown

angular