각도 4 입력 4 각도 특히, 내가 각도로 시작 해요

Question

을 ngmodel 사용하는 경우 null로 설정 형성하고, 나는 오류를 처리하고있어 하나는 연락처를 추가하고 다른 하나는 연락처를 편집하는 패널, 모든 연락처 데이터를 표시하는 패널입니다. 요점은 @Input/@로 부모 구성 요소 (contacts.component.ts)의 모든 데이터를 하위 구성 요소 (edit-contact.component.ts)로 전달합니다.

얼어 붙은 지점에서 나는 두 번의 출력을 보았습니다. 첫 번째는 편집 작업 클릭 (연락처 패널에서)이고 두 번째는 "편집"입니다. 편집 폼에서 버튼을 클릭하십시오. 보시다시피 연락처 데이터 객체가 부모에서 자식으로 올바르게 전달됩니다. 나는 당신이 그 패널에 선택 모든 연락처 데이터와 양식 자동 완성을 만들기 위해 (이 어는점에서 주석) 편집 - contact.component.html 템플릿 ngModel 속성을 삽입 할 때

는

{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 

는

글쎄, 그것은 제대로 작동 하지만 입력을 편집하고 "편집"을 클릭하면 버튼을 사용하면 속성이 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 : 당신의 Plunker가 예상대로 작동하도록 나타나는 angular docs에 설명 된대로, 양방향 바인딩 구문 [(ngModel)]를 사용하여 입력에 ngModel를 추가하는 경우 https://plnkr.co/edit/XQ1nswWI1gg22WtBad3O?p=preview

Answer 1

.

e.e.

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> 
... 

은 배열 값, "단어 체험"과 "교육"을 위해, 당신은 쉽게 속성에 액세스하기 위해 배열을 통해 루프를 사용하고 *ngFor해야합니다.

this.emptyInputs() 및 this.backAddContact()으로 양식을 재설정 할 때도 모델을 재설정하는 중입니다 ... 따라서 부모에게 수정 된 모델을 방출 한 후에 수행하십시오.