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

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

所以我有一个仪表板，仪表板上有大量的腔室和一个表头

带应用程序标题和应用程序室的仪表板组件的HTML：

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

然后我的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（）函数的按钮时，视图会显示更新，元素会显示或隐藏

但我需要从标题上的按钮切换它

@Input（）kamers

和模板

*ngIf=“kamer.patient==null”

之间有一点不匹配

• 只需将输入更改为

  kamer

模板HTML 更新（1）－ 使用

@ViewChild

要引用子组件的函数，请使用

• 放置

  @ViewChild（'child'）子对象

• 在父模板中引用如下子函数：

  Toggle

父组件 更新（2）－ 使用

@Output（）

+

EventEmitter

要扩展以前的设置以使用同级组件，可以

• 让兄弟姐妹使用
• 侦听父组件中发出的事件，并使用

  ViewChild

兄弟组件

---

可能的副本是关于回调作用域中的“this”的。但是，我的代码应该根据该示例工作。this.showId不起作用..如果它根本没有显示或隐藏，并且你没有其他内容，你确定条件

*ngIf=“kamer.patient==null”

已满足吗？这就是问题所在，这应该添加到问题中，因为这是非常相关的信息！所以请把所有相关代码都放在帖子里！：）我已经更新了问题，谢谢！谢谢你的时间，我已经用更多的信息更新了这个问题。所以基本上，如果我听从你的建议，我有两个孩子（应用程序室和应用程序头）的仪表板组件。现在，您的示例演示如何从父对象调用子对象的函数。我需要从一个孩子调用一个函数到另一个孩子。也许最好/最简单的解决方案就是把标题放在仪表板html中，然后按照你说的做？好的，我想我已经为兄弟姐妹的设置准备好了。。如果你还需要什么，请告诉我，谢谢！先生，你是个英雄！谢谢，很高兴它有帮助！

@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();
  }

}

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

    }

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

}

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

}

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

}