Angular 2使用* ngIf和布尔值隐藏和显示元素 [英] Angular 2 hide and show element using *ngIf with boolean

问题描述

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

I want to show and hide an element by using a button that's located in another component.

所以我有一个仪表板，里面有很多小室，还有一个标题.

So I have a Dashboard with an amount of chambers in it and a header.

DashboardComponent的HTML，其中包含应用程序标题和应用程序腔室:

HTML of DashboardComponent with app-header and app-chamber:

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

我的ChamberComponent中有* ngIf这个HTML:

I have this HTML wth the *ngIf in my 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中，我有一个需要显示和隐藏元素的按钮:

In the HeaderComponent I have a button that needs to show and hide the element :

@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代码:

then my ChamberComponent code:

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

    }

因此，当我单击按钮时，值会更改(我已经在控制台中记录了此值)，但是视图未更新..

So when I click the button, the value changes (I've logged this in the console) but the view isn't updated..

当我在ChamberComponent中放置一个调用toggleId()函数的按钮时，该视图会显示更新，并且该元素显示或隐藏.

When I put a button in my ChamberComponent that calls the toggleId() function the view does reveice an update and the element is shown or hidden.

但是我需要通过标题上的按钮对其进行切换.

But I need to toggle it from a button on my header.

推荐答案

柱塞

@Input() kamers与模板*ngIf="kamer.patient == null"之间存在很小的不匹配.

Plunker

There was a small mismatch between the @Input() kamers and the template *ngIf="kamer.patient == null".

• 只需将输入更改为kamer.

<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)-柱塞(1)

使用@ViewChild

要引用子组件的功能，请使用 ViewChild

Update (1) - Plunker (1)

Use @ViewChild

To reference a child component's functions use ViewChild

• 将@ViewChild('child') child;放在父组件中
• 在父模板中引用子函数，如下所示:<button (click)="child.toggleId()">Toggle</button>

• Place @ViewChild('child') child; in the parent component
• In the parent template reference child functions like this: <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)-柱塞(2)

使用@Output() + EventEmitter

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

Update (2) - Plunker (2)

Use @Output() + EventEmitter

To extend the previous setup to use a sibling component you can

• 让兄弟姐妹使用 EventEmitter
• 在父组件中监听发出的事件，然后使用ViewChild
调用所需的子函数.

• Have the sibling emit an event using an EventEmitter
• Listen to the emitted event in the parent component, and call the child function needed using 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;
  }

}

这篇关于Angular 2使用* ngIf和布尔值隐藏和显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！