Angular 2隱藏和顯示元素使用* ngIf與布爾值

Question

我想通過使用位於另一個組件中的按鈕來顯示和隱藏元素。

所以我有一個儀表板，其中有一定數量的腔室和一個頭部。

HTML DashboardComponent與應用頭和應用室：

<app-header></app-header> 
    <div class="container"> 
     <div class="row"> 
     <app-chamber [kamers]="kamers"></app-chamber> 
     </div> 
    </div> 

我有這樣的HTML問心無愧的* ngIf在我ChamberComponent：

<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index"> 
     <md-card class="chamber wit" *ngIf="kamer.patient == null"> 
     <p *ngIf="showId">{{kamer.id}}</p> 
     </md-card> 
</div> 

在HeaderComponent我有一個按鈕，需要顯示和隱藏元素：

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent implements OnInit { 

    @Input() aList; 

    dashboardComponent:DashboardComponent; 

    chamberComponent:ChamberComponent; 

    constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) { 
    this.dashboardComponent = dashboardComponent; 
    this.chamberComponent = chamberComponent; 

    } 

    ngOnInit() { 

    } 

// THIS GETS CALLED BY A BUTTON CLICK 
    toggleId(){ 
    this.chamberComponent.toggleId(); 
    } 

} 

然後我ChamberComponent代碼：

@Component({ 
    selector: 'app-chamber', 
    templateUrl: './chamber.component.html', 
    styleUrls: ['./chamber.component.css'] 
}) 
     export class ChamberComponent implements OnInit { 

     @Input() kamers; 
     showId:boolean; 

     constructor() { 
     this.showId=false; 
     } 

     ngOnInit() { 

     } 

     toggleId =() => { 
      this.showId = !this.showId; 
     } 

    } 

所以，當我按一下按鈕，價值的變化（我在控制檯登錄此），但認爲沒有更新..

當我把一個按鈕，在我的ChamberComponent調用toggleId（）函數視圖不會引起更新，並且元素被顯示或隱藏。

但我需要從我的標題上的按鈕來切換它。

Answer 1

Plunker

有是@Input() kamers和模板*ngIf="kamer.patient == null"之間的小不匹配。

• 輸入剛剛更改爲kamer。

HTML模板

<md-card class="chamber wit" *ngIf="kamer.patient === null"> 
    <p *ngIf="showId">{{kamer.id}}</p> 
</md-card> 

<button (click)="toggleId()">Toggle</button> 

組件

@Component({ 
    selector: 'material-app', 
    templateUrl: 'app.component.html' 
}) 
export class AppComponent { 

    kamer = { 
    patient: null, 
    id: '1' 
    }; 
    showId = false; 

    ngOnInit() { 

    } 

    toggleId() { 
    this.showId = !this.showId; 
    } 

} 

更新（1） - Plunker (1)

使用@ViewChild

要引用一個子組件的功能使用ViewChild

• 將@ViewChild('child') child;在父組件
• 在父模板參考子功能是這樣的：<button (click)="child.toggleId()">Toggle</button>

父組件

@Component({ 
    selector: 'material-app', 
    template: ` 
    <material-child #child></material-child> 
    <button (click)="child.toggleId()">Toggle</button> 
    ` 
}) 
export class AppComponent { 

    @ViewChild('child') child; 

} 

子模板

<md-card class="chamber wit" *ngIf="kamer.patient === null"> 
    <p *ngIf="showId">{{kamer.id}}</p> 
</md-card> 

輔元件

@Component({ 
    selector: 'material-child', 
    templateUrl: 'app.component.html' 
}) 
export class ChildComponent { 

    kamer = { 
    patient: null, 
    id: '1' 
    }; 
    showId = false; 

    ngOnInit() { 

    } 

    toggleId() { 
    this.showId = !this.showId; 
    } 

} 

更新（2） - Plunker (2)

使用@Output() + EventEmitter

要延續之前的設置使用，你可以

• 擁有同級組件兄弟會使用EventEmitter發出事件
• 聽父組件所發出的事件，並呼籲使用ViewChild

同級組件

@Component({ 
    selector: 'material-sibling', 
    template: ` 
    <button (click)="toggle.emit()">Toggle</button> 
    ` 
}) 
export class SiblingComponent { 
    @Output() toggle = new EventEmitter(); 
} 

父組件

@Component({ 
    selector: 'material-app', 
    template: ` 
    <material-child #child></material-child> 
    <material-sibling (toggle)="child.toggleId()"></material-sibling> 
    ` 
}) 
export class AppComponent { 

    @ViewChild('child') child; 

} 

子模板

<md-card class="chamber wit" *ngIf="kamer.patient === null"> 
    <p *ngIf="showId">{{kamer.id}}</p> 
</md-card> 

所需的子函數

輔元件

@Component({ 
    selector: 'material-child', 
    templateUrl: 'app.component.html' 
}) 
export class ChildComponent { 

    kamer = { 
    patient: null, 
    id: '1' 
    }; 
    showId = false; 

    ngOnInit() { 

    } 

    toggleId() { 
    this.showId = !this.showId; 
    } 

}