Angular 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"> 

或設置其他標誌。

它可以工作，因爲它會在您提取數據後呈現輸入。

Answer 2

您需要在添加項目後更新數組的整個引用。在你完成推到數組新的數據後，你必須做這樣的事情：

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

它意味着什麼，如果有就是你的模型內的任何東西已經改變的情況下，但它並沒有反映來看，你可能需要通知Angular檢測這些更改（檢測本地更改）並更新視圖。

你也可以做的是執行DoCheck界面。默認變更檢測算法通過在變更檢測運行中通過引用比較綁定屬性值來查找差異。除了缺省算法以外，ngDoCheck被調用來檢查指令中的更改。