クリック時の角度入力の子コントロール

Question

私は角度と反応型の初心者です。

私は2つの選択リストがあるUIデザインを持っていますが、最初の選択リストをクリックすると2番目の選択リストが表示されるという考えがあります。最初の選択リストは子コンポーネントのメソッドを呼び出し、JSONデータを返すHttpサービスに要求します。 JSONが返されますが、子コンポーネントの選択リストは決して再投入されません。 Loggingを使用すると、子コンポーネントのメソッドが呼び出されていることがわかります。JSONが戻ります。テストとして、同じテンプレートコードを使用してテストコンポーネントを作成しましたが、コンポーネントの唯一の変更は、選択リストにOnInitが移入され、完全に機能することでした。

テンプレート：私は私のテンプレートコードを表示するように得ることができないいくつかの理由 、私は * ngFor =「boardListの値を聞かせて」の値を使用しています=「{{value.boardURL}}」> {{ value.name}}を使用してselectのオプションを設定します。

コンポーネント：

export class BoardForMinistryComponent implements OnInit { 

    boardList: IBoard[]; 
    errorMessage: string; 
    boardSelect: FormGroup; 
    innerURL: string; 

    constructor(private bService: BoardsService, private fb: FormBuilder) { } 

    ngOnInit() { 
     this.boardSelect = this.fb.group({ 
      boardSelector: '' 
     }); 
    } 

    reloadBoardList(theUrl: string): void { 
     this.boardSelect = this.fb.group({ 
      boardSelector: '' 
     }); 

     this.innerURL = theUrl; 

     this.bService.getBoardsForMinistry(theUrl) 
      .subscribe(b => this.boardList = b, 
      error => this.errorMessage = <any>error); 
    } 
} 

Answer 1

あなたは

export class BoardForMinistryComponent implements OnInit { 
... 
ngOnInit() { 
    this.boardSelect = this.fb.group({ 
     boardSelector: '' 
    }); 
    this.onChanges() //<--call a function 
} 
//the function onChanges 
onChanges() 
{ 
    this.myForm.get('boardSelector').valueChanges.subscribe(val => 
    { 
     reloadBoardList(val); //<--reload the board list 
    }); 
} 
reloadBoardList(theUrl: string): void { 
    ..... 
} 

フォームを作成した後、変更をサブスクライブする必要があります