Angular 2使用* ngIf和布尔值隐藏和显示元素
发布时间：2020-12-17 17:58:55 所属栏目：安全 来源：网络整理
导读：我想通过使用位于另一个组件中的按钮来显示和隐藏元素. 所以我有一个仪表板,里面有一定数量的腔室和一个标题. 带有app-header和app-chamber的DashboardComponent的HTML： app-header/app-header div class="container" div class="row" app-chamber [kamers]
|
我想通过使用位于另一个组件中的按钮来显示和隐藏元素.
所以我有一个仪表板,里面有一定数量的腔室和一个标题. 带有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()函数的按钮时,视图会显示更新并显示或隐藏元素. 但我需要从标题上的按钮切换它. 解决方法
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’)孩子;在父组件中 父组件 @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发出事件 兄弟组件 @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',id: '1'
};
showId = false;
ngOnInit() {
}
toggleId() {
this.showId = !this.showId;
}
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
相关内容