将数组传递给自定义 HTML 组件的问题 - Aurelia 框架

Question

我已经花了很多时间来解决这个问题，并没有发现类似的问题，尽管我确信它已经出现了。

我将尝试简要总结我正在尝试做的事情和问题，然后提供相关代码。我有一个带有动态表单输入的表单。表单输入来自我制作的自定义 HTML。此元素中有几个输入，一个是带有来自传递数组的选项的选择输入。我在这个项目的其他部分做了一个类似的选择选项，我什至能够在我的页面的主要 HTML 部分而不是自定义组件中创建选择输入。

所以，我想我缩小了范围，这一定是我将数组传递给 HTML 的方式。我已经看到 camelCase 在将绑定属性传递给元素时首选使用 came-case。但是，我的变量不是驼峰式的。它被称为“glaccounts”。我尝试过添加破折号：g-laccounts、g-l-accounts、gl-accounts。这些都没有奏效。我已经尝试切换到“帐户”，但仍然没有运气。它只是告诉我“glaccounts”是不可重复的。

相关代码：（删除不相关的 HTML，因此标签不存在。将对 Typescript 类执行相同操作）

<div repeat.for="item of items">
  <div class="margin-sm-t">
    <manual-entry-inputs item-number="${item.itemNumber}" glaccounts="${item.glaccounts}" handle-remove-button.call="removeEntry(item.itemNumber)"></manual-entry-inputs>
   </div>
</div>
<button class="btn btn-xs btn-outline btn-success" data-toggle="tooltip" title="New Entry Item" click.delegate="addEntryItem()">
  <i class="fa fa-plus fa-1x"></i>
</button>

以上是整体形式的一部分。一个repeat.for 被用在一个叫做items 的数组上。每个项目都有一个手动输入自定义元素，其中包含 itemNumber、glaccounts 和传递的回调函数。我相信 glaccounts="${item.glaccounts}" 的问题。它下方的 Button 将条目添加到此表单。

export class ManualEntry {
    public itemCount: number = 2;
    public items: ManualEntryInputs[] = [];
    public glaccounts: Models.IGLAccountMessage[] = [];
    public glaccountRequest: Models.IGLAccountQueryRequest = {};
    constructor(private glaccountList: Api.GLAccountList,
        private router: ControllerService) {
    }

    public activate = () => {
        this.glaccountList.get(this.glaccountRequest).then(this.loadGLAccountList);
    }

    public loadGLAccountList = (response: Models.IGLAccountQueryResponse) => {
        if (response.isOk) {
            this.glaccounts = response.data;
            let manualEntryInputs = new ManualEntryInputs(this.itemCount - 1, this.glaccounts);
            this.items.push(manualEntryInputs);

            manualEntryInputs = new ManualEntryInputs(this.itemCount, this.glaccounts);
            this.items.push(manualEntryInputs);
            console.log(this.items)
        }
    }

    public addEntryItem = () => {
        this.incrementItemCount();
        let newManualEntryInputs = new ManualEntryInputs(this.itemCount, this.glaccounts);
        this.items.push(newManualEntryInputs);
    }
}

这是整个表单背后的 Typescript 类。 Aurelia 框架调用 activate() ，然后我从我的 API 中获取帐户。声明了两个手动输入对象，它们都被推送到带有 itemCount 和新抓取的帐户的数组项中。 addEntry 的目的是显示它与传递给 ManualEntryInputs 对象的 glaccounts 变量相同。我可以通过控制台日志确认这个 glaccounts 包含我要传递的数组。如前所述，我在主页（不是自定义元素）中有一个使用相同数组的工作选择输入。

<div class="col-sm-1">
  <label class="h5">Item ${itemNumber}</label>
</div>
<div class="col-sm-2">
  <select class="form-control" name="accountId" value.bind="accountId">
    <option value="null">Choose...</option>
    <option repeat.for="glaccount of glaccounts" model.bind="glaccounts.id">
      ${glaccounts.name}
    </option>
  </select>
</div>

这是在手动输入输入组件中。我在主页中使用的相同代码。我包含了 itemNumber 以显示我如何使用该值，因为它确实有效并显示了我所期望的，而不是数组。

export class ManualEntryInputs {
    @bindable itemNumber: number;
    @bindable account: string;
    @bindable reference: string;
    @bindable amount: number;
    @bindable date: Date;
    @bindable memo: string;
    @bindable handleRemoveButton: Function;
    @bindable glaccounts: Models.IGLAccountMessage[];
    journalEntryDetail: GLJournalEntryDetail;

    constructor(itemNumber: number, glaccounts: Models.IGLAccountMessage[]) {
        this.itemNumber = itemNumber;
        this.glaccounts = glaccounts;
        console.log(glaccounts);
        console.log("In manual input constructor");
        console.log(this.glaccounts);
        console.log(this.itemNumber);
    }

    public activate = () => {
        console.log("Inn Activate")
        console.log(this.glaccounts);
    }
}

最后，用于手动输入的 TS 类。控制台输出，当在其他 TS 文件中声明对象时，当调用 activate 和 addEntry 时，它们具有我想要的预期值。我假设当它们在页面上创建时可能会再次被调用，因为我得到了 this.glaccounts 的 BindingEngine JSON 对象的其他控制台输出和 this.itemNumber 的实际 HTML。

如果有人有过类似的经历，我将不胜感激知道您是如何达成该决议的，或者如果有人有任何信息可以为我指明正确的方向，我将不胜感激！感谢您提供任何见解。

Answer 1

在此处绑定到可绑定属性时不应使用字符串插值，这只会传递一个字符串并破坏绑定链

<manual-entry-inputs item-number="${item.itemNumber}" glaccounts="${item.glaccounts}"

试试这个：

<manual-entry-inputs item-number.bind="item.itemNumber" glaccounts.bind="item.glaccounts"