Angular2 - [(ngModel)] 빈 개체가있는 경우

Question

다양한 입력, 옵션 및 선택이있는 양식이 있습니다. 양식은 여러 구성 요소에 걸쳐 다양한 섹션으로 나뉩니다. 예를 들어 :

order.orderInfo.customerName 
order.orderInfo.address 
order.model.size 
order.model.options 
order.trims.selectedTrims 

Order = {} 경우 그것은 정의되지 않은 오류가 충돌합니다. 첫 번째 생각은 elvis 연산자를 사용하는 것이지만 Angular는 과제에서이 연산자를 사용할 수 없습니다. 유일한 "솔루션"나는 지금까지 모든에서 [(ngModel)] 문법 설탕을 사용하고 대신 모든 것을 분해하지 않는 것입니다 발견했습니다, 여기에

<input [ngModel]="order?.orderInfo?.customer_mtm" (ngModelChange)="order.orderInfo.customer_mtm=$event" customer_mtm type="text"> 

, 나는 매우 잘못된 일을해야 물건의 IT 있기 때문에 지금 내가있는 곳인 [(ngModel)] 구문을 사용할 수 없다는 것은별로 의미가 없습니다.

모든 코드를 [ngModel]/(ngModelChange) 구문으로 변경해야합니까? 그렇지 않으면 여기서 개념적으로 잘못된 것이 있습니까?

Answer 1

아마도이 문제를 해결하는 데는 몇 가지 방법이있을 수 있습니다.

컨트롤러에서 기본 개체를 상수로 만듭니다. 당신을 위해 :

이베이스는 그렇지 않으면 elvis 연산자를 사용해야하는 모든 요구 사항을 충족해야합니다. 생성자에서 모델의 값을 설정하면 (ngInit, 또는 정의되지 않은 오류를 얻을 것이다되지 않음), 당신은 갈 : 당신이 기본 참조를 사용하지 않도록이 객체의 복사본을 만듭니다

this.order = Object.assign ({}, ORDER_BASE); 

(모델로).

this.order = makeFreshOrder (); 

makeFreshOrder () { 
    return Object.assign ({}, ORDER_BASE); 
} 

이것은 당신이 등등, 엘비스 사업자 덤비는 특성이 초기화에 사용할 수있는 걱정, 그리고 밖으로 가져옵니다

는 다른 방법으로는 공장 틱 기능을 사용합니다.

마크 업에서 로직을 최소한으로 유지하려고 노력했습니다. 그리고 제가 작업 한 몇 군데는 최상의 방법입니다. 삼항 표현식 (다루기 힘들어 짐)을 가진 마크 업에서 실제로 간단한 결정/확인/유효성 검사 이외의 작업을 수행하지 말고 컨트롤러에서 수행하십시오.

(기본 개체는 "주문"클래스의 새 인스턴스가 될 수 있습니다 ... 이런 일종의 입력은 유용 할 수 있습니다.)

저는 실제로 마크 업에서 "엘비스 연산자를 사용하는 경우 게으르다"고 들었습니다. 저 편도 또는 다른 것에 대해 확실하지 않지만, 나는 그 요지를 이해합니다.

Answer 2

추락 한 이유는 "2 수준"속성 order 개체 (order?.orderInfo?.customer_mtm)에 액세스했기 때문입니다. 1 레벨 (like order.orderInfo) 만 액세스하면 작동합니다. 하자 당신이 자바 스크립트 var a = {}; a.something works에서이 코드를 실행 상상하지만 a.something1.something2 때문에 something1이 undefined하다 할 수 없기 때문에

이 의미가 있습니다.

이제 문제를 해결하기 위해 제 제안은 하위 구성 요소를 만들어서 order 개체를 전달하거나 생성자에서 빈 order 개체를 만들 수 있습니다.

var order = {}; 
order.orderInfo = {}; 

같은

이

뭔가가 말이 바랍니다.