Angular 2 ngModel无法达到阵列属性

各位程序员好

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

此数组将显示在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>  

似乎

ngModel

无法访问我的

this.rule['condition']['expression']

数据

如果我把它改成

这个.rule['condition']

它工作得很好

你知道我怎样才能解决这个问题吗？我很感谢你的解释，不仅仅是固定的代码

JSON

{
“id”：“1”，
“代码”：“A1234”，
“有效”：空，
“规则集列表”：{
“规则集”：{
"1": {
“id”：“1”，
“凭证id”：“1”，
“条件”：{
“表达式”：“shop.totalamount>`15`&¤t_datetime<`1490021400`”
},
“结果”：{
“结果”：{
"1": {
“id”：“1”，
“价值路径”：“shop.totalamount”，
“计算”：“#值*0.9”，
“新值”：空
}
}
}
},
"2": {
“id”：“2”，
“凭证id”：“1”，
“条件”：{
“表达式”：“shop.totalamount>`20`&¤t_datetime<`1490021400`”
},
“结果”：{
“结果”：{
"2": {
“id”：“2”，
“价值路径”：“shop.totalamount”，
“计算”：“#值*0.8”，
“新值”：空
}
}
}
}
}
}
}

您的根本原因是

#rule=“ngModel”

和

#discount=“ngModel”

。您已经在使用双向绑定，所以不要声明为ngModel。模板引用值和双向绑定不在一起。据介绍,

模板输入和引用变量名称有自己的名称空间。

let hero

中的

hero

变量与声明为

#hero

的

hero

变量不同

所以我想你基本上可以说有两个变量“互相争斗”和冲突

此外，您还可以在NGM模型中使用点表示法，因此以下内容是相等的：

rule['condition']['expression']

及

我不会更深入地讨论这个问题，因为这里有一些很好的答案：。但如果您愿意，当然可以使用括号表示法：）

编辑：

忽略了一个事实，即每个名称属性都必须是唯一的，以便表单字段作为不同的表单字段进行计算，而不是一个相同的表单字段。因此，您可以使用索引执行以下操作：

name=“rule{{i}}”

和

name=“折扣{{i}}”

最后，一个要玩的扑克牌：

另外，我可能会建议您现在使用反应式表单，这样会更容易处理，因为删除模板引用会给验证带来麻烦。对于反应式表单，您可以完全跳过ngModels，将默认值设置为表单控件，还可以处理验证。这里有更多关于和的信息，因为这是你需要的

---

下面是一个最近的例子，其中的值来自http请求，这意味着与您的一样，您需要首先设置空表单控件，当您想要编辑表单时，请使用

setvalue

或

patchvalue

为表单设置预值。根据您的用例，您可能根本不需要使用patchValue。但如果您需要。

此

不应在模板中定义

this.someVar

不起作用

someVar

会像个符咒一样起作用。@n00dl3我也试过了，也不起作用。从模板中删除

此

后，如果未按预期工作，则逻辑上应该有其他内容，但当前语法错误从任何地方删除

此

，并更新答案，并提供您试图访问的数据的结构。@Babarbill我将在一秒钟内更新它，您介意告诉我为什么使用

。在这种情况下，这个
是错误的吗？在您的Plunk上，您可以打印两次相同的值，而不是两个不同的值。但是您的ngFor工作得很好，我使用var
i
的输出进行了测试。你能把它修好并告诉我出了什么问题吗？到目前为止，泰因的回应。我明天会在工作中测试它！是的，我忽略了名称属性必须是唯一的这一事实；）谢谢你指出这一点。这是固定的，但也许考虑使用反应形式在这里代替。事实上，我认为这对你来说是最好的解决办法。查看更新的答案，这里有一些有用的链接，希望能对您有所帮助！：）
    {
        "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
                            }
                        }
                    }
                }
            }
        }
    }

rule['condition']['expression']

rule.condition.expression