angular - 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

[提及]="users.length>0 ? 用户：[]"

使用此条件进行提及。仅当加载用户数组时才会设置该值。

Answer 2

也许你应该像这样尝试

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

或设置其他在您获取数据后为真的标志。

它可以工作，因为它会在您获取数据后呈现输入。

Answer 3

添加项目后，您需要更新数组的整个引用。完成推送新数据后，您必须执行以下操作：

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

如果模型中的任何东西发生了变化但没有反映视图，这意味着什么，您可能需要通知 Angular 来检测这些更改（检测本地更改）并更新视图。

您还可以做的是实现 DoCheck 接口。默认更改检测算法通过在更改检测运行中通过引用比较绑定属性值来查找差异。除了默认算法之外，还会调用 ngDoCheck 来检查指令中的更改。