Angular 7以编程方式显示表头 - ngFor和ngIf在同一个选择器上_编程开发

Angular 7以编程方式显示表头 - ngFor和ngIf在同一个选择器上

创始人

2024-10-17 05:00:38

0次

在Angular 7中，你可以使用编程方式显示表头，结合ngFor和ngIf在同一个选择器上。以下是一个示例解决方法：

在组件的HTML模板中，使用ng-container来包装表头的选择器，并使用*ngIf指令来根据条件显示表头：


      
  
    
        {{ header }}

在组件的Typescript文件中，定义一个布尔类型的变量showTableHeader来控制是否显示表头，并定义一个字符串数组tableHeaders来存储表头的内容：

export class AppComponent {
  showTableHeader: boolean = true;
  tableHeaders: string[] = ['Header 1', 'Header 2', 'Header 3'];
  
  // 根据条件切换显示/隐藏表头
  toggleTableHeader() {
    this.showTableHeader = !this.showTableHeader;
  }
}

在组件的HTML模板中，可以通过点击按钮来切换showTableHeader变量的值，从而控制表头的显示和隐藏：

这样，当你点击按钮时，showTableHeader变量的值将切换，并相应地显示或隐藏表头。

上一篇：Angular 7页面动画导致页面重新加载

下一篇：Angular 7一次HTTP请求JSON加载表单中的所有数据，并传递多个变量给组件。

Angular 7以编程方式显示表头 - ngFor和ngIf在同一个选择器上

相关内容

热门资讯

Angular 7以编程方式显示表头 - *ngFor和*ngIf在同一个选择器上

相关内容

热门资讯

Angular 7以编程方式显示表头 - ngFor和ngIf在同一个选择器上