角2の言及：APIコールの後に配列のバインドをディレクティブに更新する方法

Question

私はこのパッケージを使用していますhttps://www.npmjs.com/package/angular2-mentions。 はので、私のコードはこれです：

.ts file : 
    ngOnInit():void { 
    this.items.push("temp Name") 
    let __this = this 
    this._userService.getAll(1).subscribe(res => { 
     res.users.forEach(function (a,b) { 
     __this.items.push(a) 
     }) 
     console.log(__this.items) 
    }) 
    } 

の.htmlファイル：

<input type="text" [mention]="items" > 

配列が更新され、APIからデータを持っていますが、ディレクティブ[言及]が古い配列に結合しているされている値が含まれています開始時に静的に初期化されています。

Answer 1

たぶん、あなたはあなたがあなたのデータをフェッチした後に真となり、この

<input *ngIf="items.length > 0" type="text" [mention]="items"> 

または設定された他のフラグのようなSTHを試してみてください。

データを取得した後に入力がレンダリングされるため、動作する可能性があります。

Answer 2

アイテムを追加した後、配列の参照全体を更新する必要があります。あなたは、あなたのモデル内の任意のものが変更されているが、それは見解を反映していない場合がある場合、それは何を意味

this.__items = this.__items.slice(); 
this.ref.markForCheck(); 

かもしれません：あなたはそのような何かをしなければならない配列の新しいデータにプッシュ終わった後これらの変更を検出（ローカル変更を検出）し、ビューを更新するためにAngularに通知する必要があります。

DoCheckインターフェイスの実装も可能です。既定の変更検出アルゴリズムでは、変更検出実行の参照によってバインドされたプロパティ値を比較することによって相違点を検索します。デフォルトアルゴリズムに加えてディレクティブの変更をチェックするためにngDoCheckが呼び出されます。