角度2.入力データが変更された後、角レンダリングのレンダリングを理解するにはどうすればよいですか？

Question

コンポーネントがあります。それはUserComponentとしましょう。このコンポーネントには、データを表示するためのグリッドコンポーネントが含まれます。各行のセルには、削除、編集、グラフなどのボタンがあります。あなたはselecedUserはapp-edit-user-graphに、別のコンポーネントに渡され、見ることができるよう、 this.selectedUser = this.tableApi.row($tr).data(); そして：

<div> 
    ...grid component goes here 
    ... and other stuff 
    <app-edit-user-graph [user]="selectedUser" [department]="department" [organization]="organization"></app-edit-user-graph> 
</div> 

ユーザーがセル内部のGraphボタンをクリック

が、私はそれを処理します。これは、このコンポーネントのHTMLのtempalteを簡略化されています。

このコンポーネントはモーダルウィンドウであり、多くの選択コンポーネントと他のコントロールがあります。

<th *ngFor="let name of heads"> 
    <div> 
     <span>{{name}}</span> 
     <span> 
     <ng-select [items]="userProjects" 
     [allowClear]="true" 
     (data)="update($event, name)"   
     [active]="setActive(name)"> 
     </ng-select> 
     </span> 
    </div> 
</th> 

は私がapp-edit-user-graphコンポーネントの変化を聞く：

@ViewChildren(SelectComponent) 
selects: SelectComponent[]; 

@Input() user: User; 
... other inputs 

ngOnChanges(changes) { 
    if (!changes.user || (changes.user && !changes.user.currentValue.id)) { 
     return; 
    } 

    this.userService.getUserProjects(this.user.id).subscribe(p=> { 
     this.userProjects = p; 
     this.updateSelects(); 
    } 

} 

public updateSelects() { 
    let rowSelects = this.selects; 
    let selectedValues = this.getSelectedValue(rowSelects); 
    let availableValues = this.getAvailableValues(selectedValues, this.userProjects); 

    rowSelects.forEach(s => { 
      s.items = availableValues; 
    }) 
} 

すべての選択コンポーネントを取得し、いくつかの値をフィルタthis.updateSelects方法これは、そのテンプレートの一部です。 問題は次のとおりです。最初にクリックすると、updateSelectsの方法でselectsメソッドが空です。私はAngularがレンダリングの選択を終えていなかったので、理由を理解しています。私がもう一度モーダルを開くと、他のレコードのために私は前のセレクトセットを取得します。

入力データが変更された後に角レンダリングがどのように理解されるのでしょうか。

Answer 1

このコードはuserProjectsを設定し、すぐにupdateSelects()を呼び出します。

this.userProjects = p; 
    this.updateSelects(); 

角度は、間に何かをする機会がありません。 検出を変更するには、明示的な呼び出しを使用すると、角度を指示することができますが、DOMの更新を実行します。

constructor(private cdRef:ChangeDetectorRef) {} 

ngOnChanges(changes) { 
    if (!changes.user || (changes.user && !changes.user.currentValue.id)) { 
     return; 
    } 

    this.userService.getUserProjects(this.user.id).subscribe(p=> { 
     this.userProjects = p; 
     this.cdRef.detectChanges(); // <<== enforce change detection 
     this.updateSelects(); 
    } 
}