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

Question

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

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

所以，我想我缩小了范围，它一定是我将数组传递给HTML的方式。我已经看到camelCase在将绑定属性传递给元素时，它更倾向于使用come case。然而，我的变量不是骆驼大小写的。它被称为"冰川计数"。我试着添加破折号：g-laccount，g-l-accounts，gl accounts。这些都没有奏效。我试过只使用"账户"，但仍然没有成功。它只是告诉我"冰川计数"是不可重复的。

相关代码：(删除没有相关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.glacccounts}"；。它下面的按钮将条目添加到此表单。

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来显示我如何使用这个值，因为它确实有效，并显示了我所期望的，只是没有显示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类用于手动输入。控制台输出，当对象在另一个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"