CoreUI Pro 4（Angular 14）Smart Table模板行无法显示求助

针对你遇到的SmartTable进入“Default”模式、自定义模板（Badge和Button）未渲染的问题，可从以下几个方面排查遗漏的配置：

• 确保导入所需CoreUI模块
  在使用SmartTable的模块（如app.module.ts）中，必须导入CSmartTableModule以及模板用到的CBadgeModule、CButtonModule，否则Angular无法识别这些组件：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { CSmartTableModule, CBadgeModule, CButtonModule } from '@coreui/angular-pro';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, CSmartTableModule, CBadgeModule, CButtonModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 配置columns时指定cellTemplate关联自定义模板
  在组件的columns配置中，必须为需要使用自定义模板的字段设置cellTemplate: 'row'（对应模板的引用变量#row），否则SmartTable会使用默认渲染方式：

  columns = [
    { key: 'name', label: 'Name' },
    { key: 'status', label: 'Status', cellTemplate: 'row' },
    // 其他字段配置...
  ];
  

• 保证自定义模板的作用域正确
  自定义的#row模板必须作为<c-smart-table>组件的直接内容子节点，不能放在组件外部，否则SmartTable无法读取到该模板：

  <c-smart-table [columns]="columns" [items]="tableItems">
    <ng-template #row let-item>
      <c-badge [color]="item.status === 'Active' ? 'success' : 'danger'">
        {{ item.status }}
      </c-badge>
      <c-button color="primary" size="sm" class="ms-2">
        操作
      </c-button>
    </ng-template>
  </c-smart-table>
  

• 验证版本兼容性
  确认@coreui/angular-pro的版本与Angular 14.1兼容，建议查看CoreUI官方文档的版本适配说明，避免因版本不匹配导致的功能异常。

内容的提问来源于stack exchange，提问作者Athadu