Question

我从角度，角度4开始，我正在处理一个错误：

我正在创建一个联系人管理器应用程序，其中包含两个表单，一个用于添加，另一个用于编辑联系人，以及一个显示每个联系人数据的面板。关键是我将@Input / @Output从父组件（contacts.component.ts）传递给子组件（edit-contact.component.ts）。

在冰点，我提供我的plunker，你会看到两个输出，第一个在编辑动作点击（在联系面板），第二个在“编辑它！”单击编辑表单上的按钮。如您所见，联系人数据对象正在从父级传递给子级。

{id: 1, name: "Sofia Mejia Gomez", id_number: "87654667X", age: "32", phone: "984613164", …} contacts.component.ts:33
{id: 1, name: "Sofia Mejia Gomez", id_number: "87654667X", age: "32", phone: "984613164", …} edit-contact.component.ts:36

好吧，当我尝试在edit-contact.component.html模板上插入ngModel属性（在此冻结点评论）时，使用您在其面板上选择的所有联系人数据自动填充表单，它可以正常工作但是当我尝试编辑任何输入并单击“编辑它！”按钮，您可以在控制台上看到一个输出，其输出的属性设置为null。

<div class="input-group main-data">
    <label for="name"></label>
    <input
      type="text" 
      class="form-control"
      name="name" 
      placeholder="Type your name..."><!--bindon-ngModel="contactToEdit.name"-->
    ...
  </div>

拜托，我将非常感谢您的所有意见。

我的Plunker：https://plnkr.co/edit/XQ1nswWI1gg22WtBad3O?p=preview

Answer 1

如果您使用双向绑定语法[(ngModel)]将ngModel添加到输入中，如angular docs中所述，您的Plunker似乎按预期工作。

即

edit-contact.component.html
...
<div class="input-group main-data">
    <label for="name"></label>
    <input
      type="text" 
      class="form-control"
      name="name"
      placeholder="Type your name..."  
      [(ngModel)]="contactToEdit.name"><!-- << See Here -->
    <label for="id_number"></label>
    <input 
      type="text" 
      class="form-control" 
      name="id_number" 
      placeholder="Id number..." 
      [(ngModel)]="contactToEdit.id_number"><!-- << And Here -->
</div>
...

对于数组值“Word Experience”和“Education”，您必须使用*ngFor循环遍历数组才能轻松访问属性。

另请注意，当您使用this.emptyInputs()和this.backAddContact()重置表单时，您还要重置模型...因此，在将已编辑的模型发布到父级后，可以执行此操作。

使用ngmodel时，Angular 4输入表单设置为null

1 个答案: