ngIf根據下拉值顯示 - Angular 2

我有一個包含幾個不同組件的父組件。在「項目」組件（子）中，我有下拉框，用戶可以從中選擇任何可用的項目。ngIf根據下拉值顯示 - Angular 2

我需要的是從下拉列表中選擇任何項目時使用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>

而且隨着下拉這是「項目」的組成部分。

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

如何檢查時，用戶選擇任何項目，然後顯示母公司的其他組件。

來源

2017-09-17 Vladimir Tomasevic MyNameIsVLT

您有不同的子組件（所有兄弟），如果其中一個子組件中的某個下拉列表具有特定值，那麼您希望顯示這些子組件（是不是）？ – mok

是的，就像那樣:) –

您可以使用項目組件的輸出。流程將如下定義：

步驟1。在父組件改變爲項目組件爲：

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

步驟2：在項目組件中定義的輸出變量爲：

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

步驟3：在loadProject添加以下線：

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

步驟-4：在父組件定義的函數爲：

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

來源

2017-09-18 00:23:46

...這可以嗎？ 'loadProject（ID）{ this.projectService.getById（ID）.subscribe（響應=> {this.projectService.projectLoaded $ .emit（響應）}，誤差=> {console.error（誤差）; } ）; this.answerChanged.emit（$ event.value）; }' } 我得到的錯誤，answerChanged沒有定義，並且找不到名稱'$ event'@pritesh agrawal –

我的錯誤是我從我的本地代碼複製了addAswer，它應該是projectSelected，也可以使用id。我更新了答案。 –

如果我想做同樣的事情，但要隱藏其他組件，那不是兄弟姐妹，我應該改變什麼？ –

ngIf根據下拉值顯示 - Angular 2

回答

相關問題