时间戳

首页 > 解决方案 > 选项模型更改时，Angular sui-select 选项不更新

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

问题描述

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

我有一个可搜索的下拉选择，如下所示：

<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时，选择中的选项都不会相应更新..（即，如果我添加或删除一个项目，则不会反映更改）

这是我更新的方式myOptionsModel：在某个按钮的单击事件中，调用此函数：

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

我尝试了多种方法，例如使用optionsLookUp但没有运气..你能帮忙吗？

标签： angulartypescriptangular6semantic-uingmodel

解决方案

您正在尝试使用同步逻辑更新异步对象。

myOptionsModel应该是一个observable 然后你的 HTML 模板可以绑定到它的变化

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"

推荐阅读