Angular 2 使用带有布尔值的 *ngIf 隐藏和显示元素

Question

我想通过使用位于另一个组件中的按钮来显示和隐藏一个元素。

所以我有一个仪表板，里面有很多房间和一个标题。

带有 app-header 和 app-chamber 的 DashboardComponent 的 HTML：

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

我的 ChamberComponent 中有这个带有 *ngIf 的 HTML：

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

}