Javascript Can'；t更改代码隐藏中自定义元素的绑定值

我试图创建一个自定义元素，它允许我从简单的单击委托中折叠自己，但它似乎不起作用

我的js文件中有这个代码

import {inject, bindable, bindingMode} from 'aurelia-framework';

export class DataGridCustomElement {
  @bindable({ defaultBindingMode: bindingMode.oneTime }) columns = [];
  @bindable({ defaultBindingMode: bindingMode.oneTime }) items = [];
  @bindable() collpased = true;


  collapseClick() {
    this.collapsed = !this.collpased;
  }
}

这是我的HTML文件

<template>
  <require from='./data-grid.css'></require>
  <div class="collapse-arrow" click.delegate="collapseClick()">
    <span class="collapse-icon glyphicon ${collapsed ? 'glyphicon-plus' : 'glyphicon-minus'}" aria-hidden="true"></span>
    <span>Order Lines</span>
  </div>
  <div class="collapse-block" css="${collapsed ? 'display:none;' : 'display:block;'}">
    <table class="data-grid">
      <thead>
        <tr>
          <td repeat.for="column of columns">
            ${column.title}
          </td>
        </tr>
      </thead>
      <tbody>
        <tr repeat.for="item of items">
          <td repeat.for="column of columns">
            ${item[column.propertyName]}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

---

有什么想法吗？我是否遗漏了一些自定义元素？

简单的解决方案。你在

this.collapsed=中有一个输入错误！这是科帕塞德
简单的解决方案。你在
this.collapsed=中有一个输入错误！这是科帕塞德
删除
@bindable（）collpased=true中
@bindable
之后的空括号是否有效？除非你在添加详细信息，否则我总是不加括号地使用它。另外，你在
this.collapsed=中有一个输入错误！这是科帕塞德。这也在你的密码里吗？@LStarky嗯。。。那太尴尬了。。。不过，有时候你需要第二双眼睛。谢谢是的。。。我去过很多次了！我很高兴它被修复了。删除
@bindable（）collpased=true中
@bindable
之后的空括号有效吗？除非你在添加详细信息，否则我总是不加括号地使用它。另外，你在
this.collapsed=中有一个输入错误！这是科帕塞德。这也在你的密码里吗？@LStarky嗯。。。那太尴尬了。。。不过，有时候你需要第二双眼睛。谢谢是的。。。我去过很多次了！我很高兴它被修复了。基于打字错误的错误是最容易修复的。太棒了@Lstarky！基于输入错误的错误是最容易修复的。太棒了@Lstarky！
<data-grid columns.bind="invoiceColumns" items.bind="lineData"></data-grid>