Angular12使用ng-bootstrap轮播提示属性不存在报错如何解决

• 你当前的依赖版本、AppModule配置、样式导入都是正确的，报错的核心原因是模板属性绑定错误：showNavigationArrows、showNavigationIndicators是ngb-carousel组件的内置输入属性，你将这两个属性错误绑定到了HomeComponent的实例上，且没有在HomeComponent的ts文件中定义对应属性，因此触发了类型校验报错。

• 方案一：直接将属性绑定到<ngb-carousel>标签上，无需在HomeComponent中额外定义属性，示例模板代码如下：

<ngb-carousel 
  [showNavigationArrows]="true" 
  [showNavigationIndicators]="true"
>
  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img src="你的图片地址" alt="轮播图描述">
    </div>
    <div class="carousel-caption">
      <h3>轮播标题</h3>
      <p>轮播说明文字</p>
    </div>
  </ng-template>
  <!-- 继续添加其他轮播项 -->
</ngb-carousel>

• 方案二：如果需要动态控制轮播的箭头、指示器显隐，直接在HomeComponent的ts文件中定义对应属性即可：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  // 新增以下两个属性即可解决报错
  showNavigationArrows = true;
  showNavigationIndicators = true;
}

• 额外注意：你当前的AppModule declarations数组中引入了SearchBarComponent，但是没有对应的import导入语句，这个问题和当前轮播报错无关，后续运行会触发其他类型错误，建议补上对应的导入逻辑。

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