Reactive는 Angular2로 선택합니다

Question

양식에서 선택 그룹을 만들려고합니다.이 그룹은 사용자가 선택하는 항목에 따라 다릅니다 (사용자는 선택 항목에서 순차적으로 선택해야 함).

문제는 내 onChange() 함수에서 주로 발생합니다. 사용자가 캠퍼스를 선택할 때 변경 내용을 제대로 저장하지 않는 것 같습니다. 사용자가 Campus1을 선택한 경우 '건물'선택 항목에 '2'만 표시되고 Campus2를 선택하면 '건물'선택 항목에 '4'가 옵션으로 표시됩니다. (

1. 장소의 데이터를 가져 오기 : 내 접근 방식은 확실히 맞다면 난 그냥 지금 하구 있어요 때문에

   또한, 나는이 작품 때하지만 앱이 다음을 수행 할 모르겠어요 캠퍼스, 빌딩, 층 및 구역)을 JSON을 제공하는 직장에서 사용하는 API에서 가져옵니다.

2. 내가하는 일, 즉 사용자가 선택한 옵션에 따라 특정 옵션을 선택합니다.
3. 그러면 사용자는 기본적으로 필터 인이 양식을 다른 API로 보내고 보관함 정보를 가져올 수 있습니다.

어떤 도움이 필요합니까? 특히 첫 번째 부분이지만 두 번째 부분에서 내가하고 싶은 것을 성취하기 위해 올바른 길을 가고 있는지 말해 줄 수 있다면 좋을 것입니다. 반응 형 양식에 대한 Angular 문서를 읽었지만 제대로 수행하는 방법을 알 수 없습니다. 미리 감사드립니다. ngModel 당신이 그것을 (onChange가)을 변경할 때 detection.It의 불을 변경할 수 있지만, 값 'cumpus'업데이트되지 않습니다와

import {Component} from 'angular2/core'; 
    class Locker { 
     constructor(public Campus: string, public Building: string, public Floor: string, public Zone: string, public Type: string) { } 
    } 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <div class="column small-12 large-2"> 
     <label class="sbw_light">Campus</label><br /> 
     <select name="campus" [(ngModel)]="campus" (change)="onChange()"> 
      <option *ngFor="#each of lockers" [value]="each.Campus"> 
       {{each.Campus}} 
      </option> 
     </select> 
     <br> 
      <label class="sbw_light">Building</label><br /> 
     <select name="building" [(ngModel)]="building"> 
      <option *ngFor="#each of buildings"> 
      <div *ngIf="campus == 'Campus1'"> 
       {{each}} 
       </div> 
      </option> 
     </select> 
     </div> 
     ` 
    }) 
    export class AppComponent { 

     campus: String = ""; 
     building: String = ""; 
     floor: String = ""; 
     zone: String = ""; 
     type: String = ""; 

     lockers: Locker[] = [new Locker("Campus1", "2", "2", "B", "Simple"), 
          new Locker("Campus2", "1", "1", "C", "Simple"), 
          new Locker("Campus2", "1", "0", "A", "Simple")]; 

     buildings = []; 
     floors: = []; 
     zones: = []; 
     types: = []; 

     onChange(){ 
     console.log(campus); 
     if (campus == 'Campus1'){ 
      this.buildings.length = 0; 
      this.buildings.push("2"); 
     } 
     else{ 
      this.buildings.length = 0; 
      this.buildings.push("4"); 
     } 
     } 

    } 

Answer 1

문제 :

여기 내 TS 파일입니다. 그래서 당신은 같은 것을 사용해야합니다

valueChanged(event: any) { 
    const campus = event.target.value; 
    console.log(campus); 
    if (campus == 'Campus1'){ 
     this.buildings.length = 0; 
     this.buildings.push("2"); 
    } 
    else{ 
     this.buildings.length = 0; 
     this.buildings.push("4"); 
    }