SonarQube提示headers中id='button'引用错误的表头问题咨询

问题根源 #

SonarQube的提示本质是表格单元格与表头的关联不匹配：

1. 按钮列的<td>错误地将headers指向了Valor列的动态表头ID（fieldValues1Header/fieldValues2Header），但它对应的表头是<th id="button">，两者完全不对应；
2. Valor列的<td>中存在变量名拼写错误：WebPage.Elements.NewFilterModal应该是WebPage.Elements.NewFieldFilterModal（少了Field），会导致动态表头ID生成错误，进一步加剧关联问题。

修复步骤 #

1. 修正按钮列的表头关联 #

按钮列是固定存在的列，对应的表头ID是button，直接将按钮列<td>的headers属性改为button即可，不需要任何动态判断：

<td headers="button">
  <button type="button" class="btn btn-primary btn-xs btn-danger" ng-click="WebPage.Elements.NewFieldFilterModal.DeleteFieldValue($index)">
    <span class="fa fa-trash text-danger" aria-hidden="true"></span>
  </button>
</td>

2. 修正Valor列的变量名错误 #

将所有Valor列<td>中headers属性里的WebPage.Elements.NewFilterModal改为WebPage.Elements.NewFieldFilterModal，确保动态生成的表头ID和<th>的ID完全匹配：

<!-- 字符串/数字类型的Valor列 -->
<td
  ng-if="WebPage.Elements.NewFieldFilterModal.FieldDataType == Configuration.DataTypes.String || WebPage.Elements.NewFieldFilterModal.FieldDataType == Configuration.DataTypes.Number"
  ng-bind="FieldValue"
  headers="{{WebPage.Elements.NewFieldFilterModal.FieldDataType === 'Valor' ? 'fieldValues1' : 'fieldValues2'}}Header"
></td>

<!-- 日期类型的Valor列 -->
<td
  ng-if="WebPage.Elements.NewFieldFilterModal.FieldDataType == Configuration.DataTypes.Date"
  ng-bind="FieldValue | date : 'dd/MM/yyyy'" 
  headers="{{WebPage.Elements.NewFieldFilterModal.FieldDataType === 'Valor' ? 'fieldValues1' : 'fieldValues2'}}Header"
></td>

3. 关于条件性表头的处理 #

按钮表头不需要添加ng-if，因为按钮列在所有场景下都是固定显示的，保持当前的<th scope="col" id="button"></th>即可，无需动态控制。

修改后的完整代码 #

<table class="table table-condensed" aria-describedby="mydesc">
   <thead>
     <tr>
       <th scope="col" id="index">No</th>
       <th scope="col" id="{{WebPage.Elements.NewFieldFilterModal.FieldDataType === 'Valor' ? 'fieldValues1' : 'fieldValues2'}}Header">Valor</th>
       <th scope="col" id="button"></th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="FieldValue in WebPage.Elements.NewFieldFilterModal.FieldValues track by $index">
       <td
         ng-bind="$index + 1"
         headers="index"
       ></td>
      
       <td
         ng-if="WebPage.Elements.NewFieldFilterModal.FieldDataType == Configuration.DataTypes.String || WebPage.Elements.NewFieldFilterModal.FieldDataType == Configuration.DataTypes.Number"
         ng-bind="FieldValue"
         headers="{{WebPage.Elements.NewFieldFilterModal.FieldDataType === 'Valor' ? 'fieldValues1' : 'fieldValues2'}}Header"
       ></td>
       
       <td
         ng-if="WebPage.Elements.NewFieldFilterModal.FieldDataType == Configuration.DataTypes.Date"
         ng-bind="FieldValue | date : 'dd/MM/yyyy'" 
         headers="{{WebPage.Elements.NewFieldFilterModal.FieldDataType === 'Valor' ? 'fieldValues1' : 'fieldValues2'}}Header"
       ></td>
       
       <td headers="button">
         <button type="button" class="btn btn-primary btn-xs btn-danger" ng-click="WebPage.Elements.NewFieldFilterModal.DeleteFieldValue($index)">
           <span class="fa fa-trash text-danger" aria-hidden="true"></span>
         </button>
       </td>
     </tr>
    </tbody>
 </table>

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