Angular集成Bootstrap报错：无法绑定‘bs-target’到button元素

问题原因 #

你遇到的Can't bind to 'bs-target' since it isn't a known property of 'button'错误，是Angular模板解析规则导致的：当你用data-bs-target="#{{spieltagparam.spieltagid}}"这种写法时，Angular会自动把data-bs-target识别为元素属性绑定，但原生button元素并没有bs-target这个属性（data-前缀在Angular里会被剥离，只识别后面的部分），所以触发了这个错误。

解决方案 #

要让Angular正确识别这是一个HTML自定义属性而非元素属性，有两种正确的绑定方式：

方式1：使用attr.前缀显式声明属性绑定 #

把data-bs-target写成attr.data-bs-target，结合插值表达式：

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
        attr.data-bs-target="#{{spieltagparam.spieltagid}}" 
        aria-expanded="false" 
        attr.aria-controls="collapse-{{spieltagparam.spieltagid}}">
  {{ spieltagparam.spieltag}}
</button>

方式2：使用方括号绑定+字符串拼接 #

用属性绑定语法直接拼接目标选择器字符串，更符合Angular的规范：

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
        [attr.data-bs-target]="'#' + spieltagparam.spieltagid" 
        aria-expanded="false" 
        [attr.aria-controls]="'collapse-' + spieltagparam.spieltagid">
  {{ spieltagparam.spieltag}}
</button>

额外优化：修复重复ID问题 #

你当前代码里，每个循环生成的accordion-header和accordion-collapse的ID都是固定的headingOne和collapseOne，这会导致DOM中出现重复ID，引发Bootstrap折叠功能异常。需要把这些ID也改成动态生成的唯一值：

修改后的完整代码示例：

<div class="accordion" id="accordionSpieltage">
  <div class="accordion-item" *ngFor="let spieltagparam of matchdayParams$ | async">
    <h2 class="accordion-header" id="heading-{{spieltagparam.spieltagid}}">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
              [attr.data-bs-target]="'#' + spieltagparam.spieltagid" 
              aria-expanded="false" 
              [attr.aria-controls]="spieltagparam.spieltagid">
        {{ spieltagparam.spieltag}}
      </button>
    </h2>
    <div id="{{spieltagparam.spieltagid}}" class="accordion-collapse collapse" 
         aria-labelledby="heading-{{spieltagparam.spieltagid}}" 
         data-bs-parent="#accordionSpieltage">
      <div class="accordion-body">
        <strong>这是第{{spieltagparam.spieltag}}轮的内容</strong> 这里可以放入对应场次的具体数据，比如比赛列表等。
      </div>
    </div>
  </div>
</div>

说明 #

两种绑定方式都能解决报错问题，推荐使用方式2，更便于后续维护。同时修复重复ID后，多个折叠面板才能独立正常触发展开/收起功能。

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