在Angular 7中,可以使用*ngIf
指令来实现组件在数据操作时视图的折叠。下面是一个包含代码示例的解决方法:
*ngIf
指令来根据条件折叠或显示视图:
showView
来控制视图的折叠状态,并实现一个方法toggleView()
来切换视图的状态:@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
showView: boolean = true;
toggleView() {
this.showView = !this.showView;
}
}
在上述代码中,初始状态下showView
为true
,表示视图是展开的。当点击"Toggle View"按钮时,toggleView()
方法会将showView
的值取反,从而切换视图的状态。
这样,当showView
为true
时,视图会显示;当showView
为false
时,视图会折叠起来。
上一篇:Angular7 子组件到父组件 - 父组件到子组件2 的通信错误
下一篇:Angular7+Ionic4构建失败TypeError:Cannotreadpropertiesofundefined(reading‘kind’)