Question

Hello其他程序员，

在我进行API调用之后，我将JSON转换为数组。

在按下＆＃34;编辑＆＃34;后，此数组将显示在HTML表格内的组件中。按钮组件将其内容从HTML表格更改为HTML表格，您可以在其中编辑数据，您可以将数据发送回API服务器。

component.html

        <div *ngFor="let rule of generateArray(gutschein['ruleset_list']['rulesets']); let i = index" >
            <div class="form-group">
                <label>Rule: </label> <input type="text" class="form-control" id="rule{{i}}" 
                requierd
                [(ngModel)]="rule['condition']['expression']" name="rule"  #rule="ngModel">
                <div [hidden]="rule.valid || rule.pristine" class="alert alert-danger">
                    Rule is not valid
                </div>
            </div>
            <div class="form-group">
                <label>Discount: </label> <input type="text" class="form-control" id="discount{{i}}" 
                requierd
                [(ngModel)]="rule['results']['results'][i+1]['calculation']" name="discount"  #discount="ngModel">
                <div [hidden]="discount.valid || discount.pristine" class="alert alert-danger">
                    Discount is not valid
                </div>
            </div>

component.ts

generateArray(obj) {
    return Object.keys(obj).map((key) => { return obj[key] });
}

似乎ngModel无法访问我的this.rule['condition']['expression']数据。

如果我将其更改为this.rule['condition']，则效果非常好。

任何想法如何解决这个问题？我要感谢不仅要解释固定代码。

JSON

    {
        "id": "1",
        "code": "A1234",
        "valid": null,
        "ruleset_list": {
            "rulesets": {
                "1": {
                    "id": "1",
                    "voucher_id": "1",
                    "condition": {
                        "expression": "shop.totalamount > `15` && current_datetime < `1490021400`"
                    },
                    "results": {
                        "results": {
                            "1": {
                                "id": "1",
                                "value_path": "shop.totalamount",
                                "calculation": "#VALUE * 0.9",
                                "new_value": null
                            }
                        }
                    }
                },
                "2": {
                    "id": "2",
                    "voucher_id": "1",
                    "condition": {
                        "expression": "shop.totalamount > `20` && current_datetime < `1490021400`"
                    },
                    "results": {
                        "results": {
                            "2": {
                                "id": "2",
                                "value_path": "shop.totalamount",
                                "calculation": "#VALUE * 0.8",
                                "new_value": null
                            }
                        }
                    }
                }
            }
        }
    }

Answer 1

您的根本原因是#rule="ngModel"和#discount="ngModel"。您已经在使用双向绑定，因此不要将template reference声明为ngModel。模板引用值和双向绑定不一起使用。按照here：

模板输入和引用变量名称具有自己的名称空间。 hero中的let hero永远不会与声明为hero的{{1}}变量相同。

所以我猜你基本上可以说有两个变量“互相争斗”并发生冲突。

此外，您还可以在ngModels中使用点表示法，因此以下内容相同：

#hero

和

rule['condition']['expression']

我不会再接近了，因为这里有很好的答案： Access / process (nested) objects, arrays or JSON 。但是，如果您愿意，您当然可以使用括号表示法：）

修改

错过了这样一个事实，即每个name属性都必须是唯一的，以便表单字段被评估为不同的表单字段，而不是同一个。所以你可以使用索引来做到这一点：

rule.condition.expression和name="rule{{i}}"

最后，一个玩家可以玩：

Demo

PS。我现在可能会建议您现在使用反应式表单，这样更容易处理，因为通过删除模板引用，您将无法进行验证。使用反应式表单，您可以完全跳过ngModel并将默认值设置为表单控件并处理验证。这里有关于dynamic forms和nested dynamic forms的更多信息，因为这就是您所需要的。

这是最新的question and answer，其值来自http-request，这意味着您需要先设置空表单控件，当您要编辑表单时使用name="discount{{i}}"或setvalue为表单设置预值。根据您的使用情况，您可能根本不需要使用patchValue。但是如果你需要的话。

Angular 2 ngModel无法达到Array属性

1 个答案:

Demo