Angular sui-select 选项模型更改时不更新选项

Question

我正在使用 Angular 语义包 UI https://edcarroll.github.io/ng2-semantic-ui/#/getting-started

我有一个可搜索的下拉列表 select，如下所示：

<sui-select class="selection" [options]="myOptionsModel" [isSearchable]="true" #questionSearch>
  <sui-select-option *ngFor="let option of questionSearch.filteredOptions" [value]="option"></sui-select-option>
</sui-select>

每当我更新 myOptionsModel 时，select 中的选项不会相应更新..（即，如果我添加或删除项目，则不会反映更改）

以下是我的更新方式 myOptionsModel：当某个按钮发生点击事件时，调用此函数：

addOption(name: string, id: number) {
  this.myOptionsModel.push({name: name, id: id})
}

我尝试了多种方法，例如使用 optionsLookUp，但没有成功。您能帮忙吗？

Answer 1

您正在尝试使用 sync 逻辑更新 async 对象。

myOptionsModel 应该是一个 observable 然后你 HTML 模板可以绑定到 Its changes

TS文件

myOptionsModel$: BehaviorSubject<MyObjectType[]> = new BehaviorSubject([]);

addOption(name: string, id: number) {
    const updatedModel = this.myOptionsModel$.value.concat([{id, name}])
    this.myOptionsModel$.next(updatedModel)
  }

HTML 文件

[options]="myOptionsModel$ | async"

Angular sui-select 选项模型更改时不更新选项

Angular sui-select options not updating when options model changes

typescript

semantic-ui

ngmodel

angular

angular6