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用于称为项的数组。每个项目都有一个手动输入输入自定义元素，其中包含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类。 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"

将数组传递到自定义HTML组件-Aurelia框架

1 个答案: