Angry2의 Pristine 양식 컨트롤에서 값 가져 오기

Question

현재 작업중인 앱에서 권한에 따라 일부 사용자에게는 선택 목록이 표시되고 다른 사용자에게는 제한 사항이 적용됩니다. IE 관리자는 모든 상점을 볼 수 있으며, 일반 사용자는 자신 만 볼 수 있습니다. 여기

<p *ngIf="storeList.length > 1"> 
    <label>Store:</label> 
    <select [(ngModel)]="storeNumber"> 
     <option></option> 
     <option *ngFor="let store of storeList" [value]="store.id">{{ store.name }} (#{{ store.internal_id }})</option> 
    </select> 
</p> 

<input *ngIf="storeList.length <= 1 type="text" [(ngModel)]="storeNumber" ngFor="let store of storeList" value="{{ store.id }}"> 

이 관련 컨트롤러의 세부 사항입니다 :

submitFabricReservation() { 
    let base = this; 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 

    let url = `http://laravel.localhost/fabrics/reservation`; 
    let data = { 
     cloth: this.cloth, 
     garment_type: this.garmentType, 
     consumer_name: this.consumerName, 
     store_number: this.storeNumber 
    }; 

    return this.http.post(url, JSON.stringify(data), { headers: headers }) 
     .toPromise() 
     .then(function(data) { 
      base.messageService.unshift(data.json()); 
      base.modal.dismiss(); 
     }); 
} 

그것은 잘 작동 나는 다음과 같은 마크 업을 가지고있다. 입력란에 올바른 ID가 해당 값일 때 텍스트 상자가 나타납니다. BUT 컨트롤러 기능에서 this.storeNumber는 정의되지 않습니다. 텍스트 상자의 값을 수동으로 편집하면 컨트롤러가 값을 받고 this.storeNumber가 입력 상자에 입력 한 값으로 설정됩니다. 그것은 처럼 모델은 변경 이벤트가있을 때만 업데이트되거나, 그 각도는 여전히 원시 상태 일 때 무시합니다.

나는이 문제를 해결할 수있는 몇 가지 방법을 볼 수 있지만, 어떻게해야 할 지 모르겠다. 나는 어떤 일이 일어날지를 알기도 어렵다. 나는 할 수 있습니다

1. 가 HTTP 콜백에 this.storeNumber을 설정
2. 입력에 화재 변경 이벤트를 강제로 (나는이 작업을 수행하는 방법을 알고)
(? 어디서 나는이 작업을 수행 할 때)
3. 요소 (#storeNumber)에 ID를 설정하고 강제로 값을 얻으십시오.

이 중 올바른 옵션이 있는지 확실하지 않습니다. 이것은 종종 충분히 올 것 같은 것 같습니다. 나는 그것이 쉬워야하는 것처럼 보이기 때문에 뭔가를 놓치고 있어야합니다. 이견있는 사람?

Answer 1

첫 번째 옵션은 올바른 옵션입니다. 그것이 구속력에 관한 것입니다 : 진실의 단일 지점이 모델입니다. 뷰는 모델을 표시하고 수정 만 허용합니다. 따라서 텍스트 필드에 주어진 값을 지정하려면보기에 텍스트 필드를 설정하지 마십시오. 모델에서 설정하고 입력이 모델에 바인딩되어 있으므로 해당 값이 표시됩니다.

저장소 목록에 여러 요소가있는 경우 선택한 storeNumber가있는 옵션에서 선택한 특성을 설정하거나 제거하는 방법을 스스로 묻습니다. 다시 말해 select는 storeNumber에 바인딩되어 있기 때문에 필요하지 않습니다. 따라서 단순히 모델에 storeNumber를 설정하면 해당 옵션이 선택됩니다.