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

Question

我花了很多时间研究这个问题，但还没有发现类似的问题，尽管我确信它一定已经出现了。

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

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

相关代码：（删除不相关的 HTML 因此标签不存在。将对 Typescript classes 做同样的事情）

<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 的数组上。每个项目都有一个 manual-entry-inputs 自定义元素，其中包含 itemNumber、glaccounts 和传递的回调函数。我相信 glaccounts="${item.glaccounts}" 的问题。它下方的按钮将条目添加到此表单。

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 class。 Aurelia 框架调用 activate()，然后我从我的 API 中获取帐户。声明了两个手动输入对象，它们都被推入具有 itemCount 的数组项和新抓取的帐户。 addEntry 的目的是显示它是传递给 ManualEntryInputs 对象的同一个 glaccounts 变量。我可以通过控制台日志确认这个 glaccounts 包含我想要传递的数组。如前所述，我在主页（不是自定义元素）中使用相同的数组有一个有效的 select 输入。

<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 来展示我如何使用该值，因为它确实有效并显示了我所期望的，而不是 arry。

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

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

Answer 1

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

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

试试这个：

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

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

Issues Passing Array to Custom HTML Component - Aurelia Framework

html

arrays

custom-component

typescript

aurelia