2017-12-15 1 views
1

を更新しません:角度4 @InputのPARAMTERは、サブスクライブ内で変更私は選択の成分を持っていると私はこのようにそれをパラメータビュー

<app-select-v2 
    [formGroup]="model" 
    [controlName]="'owner'" 
    [options]="ownerOptions" 
    [label]="'Select task\'s owner'" 
    [width]="'100%'" 
    [height]="'30rem'" 
    [scrollFrom]="5" 
></app-select-v2> 

これはownerOptions配列を取得しますどのようなカスタムを選択し、オプションのリストです。配列は次のようになります。

ownerOptions:Option[] = [ 
    {name: 'name1', value: 'value1'}, 
    {name: 'name2', value: 'value2'} 
    ... 
]; 

これは空の配列で、データで埋めたいと思います。 setOwnerOptions()関数は、塗りつぶしを行うと仮定します。私はngOnInit()でそれを呼び出す

setOwnerOptions(){ 
    this._calendar.getActiveUsers().subscribe((names:string[]) => { 
     for(var i:number = 0; i<names.length; i++){ 
     var _option = new Option(); 
     this._calendar.getUserFullName(names[i]).subscribe((fullname:string) =>{ 
      _option.name = fullname; 
      _option.value = names[i]; 
      this.ownerOptions.push(_option); 
     }); 
     } 
    }); 
    } 

(私はこれがAPIからのID(名前)とfull_namesを取得するための最良の方法ではありません知っている。私はすぐにこの部分を書き換えます。)getActiveUsers()とgetUserFullName(name:string)関数は正常に動作しています。私はAPIから要求されたデータを取得し、ループはそれをownerOptions配列にプッシュしています。しかし、ポイントは、ビューが更新されず、subscribe外では、angleは変更を気付かないため、ownerOptionsはまだ空の配列です。 誰かが私を助けてくれますか?私はこの経験のようなものを持っている:/ (Iゾーンを作成し、changeRefでスクリプトを実行しようとしましたが、それは私のために同じことを働いていた。)

おかげであなたの答えと時間:)

答えて

2

問題はここにある:この時点i

_option.value = names[i]; 

は、すべてのサブスクリプションのためにnames.length - 1等しいです。実際には最高のコードではありませんが、実際に達成したいことを確認するのは難しいので、問題を修正するためにこれを変更することができます。

​​

全くわからないが、私はあなたにもだけではなく、varの、for loopletキーワードを使って、それを修正することができると信じて:forEachループを使用することによって、あなたは、この問題を防ぎます。実際にあなたが何をしているのか分からない場合でも、実際にはvarというキーワードを使用する必要があります。

1

はでOnChangesを実装しますあなたの子コンポーネント:このメソッドは毎回Inputトリガされます

export class SelectV2 implements OnInit, OnChanges { 
    // ... 
    ngOnChanges(change: SimpleChange) { 
    console.log(change); 
    } 
} 

は、その値が変更されました。

1

項目をローカル配列にプッシュし、this.ownerOptions = myArrayを設定してみてください。

関連する問題