Kendo Chart报错：无法在字符串'true'上创建属性'mirror'求助

问题场景 #

项目中使用Kendo Chart，HTML代码如下：

<kendo-chart>
   <kendo-chart-tooltip [shared]="true"></kendo-chart-tooltip>
   <kendo-chart-legend position="bottom"></kendo-chart-legend>
   <kendo-chart-category-axis>
   <kendo-chart-category-axis-item labels="true" [line]="{visible:true}" mirror="true"
                    [categories]="categories">
   </kendo-chart-category-axis-item>
   </kendo-chart-category-axis>
           
   <kendo-chart-area background="#00000000"></kendo-chart-area>
          <kendo-chart-series>
                <kendo-chart-series-item *ngFor="let item of kapanAnaItem.planProdSeries" [data]="item.data" type="bar"
                    [name]="item.name" [color]="item.color">
                </kendo-chart-series-item>
            </kendo-chart-series>
        </kendo-chart>

服务器返回的数据为包含planProdSeries数组的结构，数组内每个元素包含data、name、color字段。绑定数据时出现报错：Cannot create property 'mirror' on string 'true'

问题原因 #

<kendo-chart-category-axis-item>中的mirror属性直接使用mirror="true"写法，会将字符串"true"传递给组件，但Kendo Chart的mirror属性期望接收布尔值类型。组件处理该属性时，会尝试将其当作对象操作，因此抛出无法在字符串上创建属性的错误。

解决方案 #

将mirror="true"修改为属性绑定写法[mirror]="true"，确保传递布尔值：

<kendo-chart-category-axis-item labels="true" [line]="{visible:true}" [mirror]="true"
                    [categories]="categories">
</kendo-chart-category-axis-item>

同时注意labels属性也存在相同类型问题，若期望传递布尔值，建议改为[labels]="true"，避免后续出现同类错误。

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