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

Question

我正在使用Angular包进行语义UI 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时，select中的选项都不会相应地更新..（即，如果我添加或删除项目，则不会反映更改）

以下是我正在更新myOptionsModel的方法：在某个按钮发出单击事件时，会调用此函数：

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

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

Answer 1

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

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"