Angular 17非独立组件中ngb-pagination报错求助

一、ngb-pagination未识别、无法绑定collectionSize属性 #

解决步骤：

• 安装匹配的ng-bootstrap依赖：Angular 17需搭配ng-bootstrap v16及以上版本，执行命令完成安装

  npm install @ng-bootstrap/ng-bootstrap bootstrap
  

• 在组件所属模块中导入NgbPaginationModule：非独立组件必须在模块的imports数组中声明该模块，示例：

  import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    imports: [
      // 其他已导入模块
      NgbPaginationModule
    ]
  })
  export class YourFeatureModule { }
  

• 组件类中定义公开属性：确保collectionSize和分页相关属性为public（Angular模板默认仅能访问public属性）

  export class YourComponent {
    page = 1;
    collectionSize = 50; // 替换为你的实际数据总条数
  }
  

• 模板中正确使用组件：检查标签拼写和属性绑定语法

  <ngb-pagination [(page)]="page" [collectionSize]="collectionSize"></ngb-pagination>
  

二、select标签无法绑定ngModel、option无法绑定ngValue #

解决步骤：

• 导入Forms模块：ngModel属于Angular表单模块，需在组件所属模块中导入FormsModule

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // 其他已导入模块
      FormsModule
    ]
  })
  export class YourFeatureModule { }
  

• 组件类中定义绑定变量和选项数据：

  export class YourComponent {
    selectedItem: any; // 可根据实际场景指定类型，如number、自定义对象等
    itemList = [
      { id: 1, label: '选项A' },
      { id: 2, label: '选项B' }
    ];
  }
  

• 模板中正确绑定语法：

  <select [(ngModel)]="selectedItem">
    <option [ngValue]="null">请选择</option>
    <option *ngFor="let item of itemList" [ngValue]="item">{{ item.label }}</option>
  </select>
  

  注：若绑定基本数据类型（如字符串、数字），也可使用[value]，但ngValue支持复杂对象的绑定。

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