我刚刚进入ember。js最近，我一直在学习他们的教程。
然而，在交互式组件部分，我遇到了一些错误。
下面是我的***图片。hbs***文件

{{#if this.isLarge}}
  <button type="button" class='image' {{on 'click' this.toggleSize()}}>
    <img ...attributes>
    <small>View Smaller</small>
  </button>
{{else}}
  <button type="button" class="image" {{on 'click' this.toggleSize()}}>
    <img ...attributes>
    <small>View Larger</small>
  </button>
{{/if}}

下面是我的***图片。js***代码

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class RentalImageComponent extends Component {
  @tracked isLarge = false;

  @action toggleSize() {
    this.isLarge = !this.isLarge;
  }
}

错误消息显示：
super-rentals/components/retrans/image.js中的构建错误（花椰菜持久过滤器：Babel>[Babel:super-rendals]）

/Users/joohyunkoh/Documents/ember-projects/super-rentals/super-lentals/components/retar/image。js:第2行出现解析错误：…“{{on'click'this.toggleSize（）}}>

应为“ID”，得到的是“INVALID”错误：/Users/joohyunkoh/Documents/ember-projects/super-rentals/super-lentals/components/retan/image。js:第2行出现解析错误：…“{{on'click'this.toggleSize（）}}>
-----------------------^应为“ID”，但得到的却是“INVALID”
如果有人能让我知道我可能做错了什么，我将不胜感激！