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>如下： <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调用所需的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;
  }

}