angular - 如果使用 SelectionOptions，如何使用 material-dropdown-select 进行变化检测

Question

我有一个 material-dropdown-select 的以下实现，它工作得很漂亮。

<material-dropdown-select [buttonText]="organizer?.name">
  <material-select-item *ngFor="let sailingClub of sailingClubs"
    {{sailingClub.name}}
  </material-select-item>
</material-dropdown-select>

我的数据来自这个属性:

Iterable<SailingClub> get sailingClubs => _store.state.sailingClubs.values;

它的好处是，一旦后端 (firebase) 将新项目添加到列表中，项目就会自动更新。

现在我想将其更改为使用可搜索的下拉菜单。为此，我必须将数据转换为 SelectionOptions 并且我遇到了问题。一切正常，但我不再检测到变化。这并不奇怪，因为我现在必须创建一个静态 SelectionOptions 实例，这是我交给 View 组件的唯一事情。

<material-dropdown-select [buttonText]="organizer?.name"
  [options]="filteredSailingClubs"
  [itemRenderer]="displayNameRenderer">
  <div header>
    <material-select-searchbox
      label="Search..."
      [filterable]="filteredSailingClubs">
    </material-select-searchbox>
  </div>
</material-dropdown-select>

这就是我创建 filteredSailingClubs 的方式

filteredSailingClubs = new StringSelectionOptions(_store.state.sailingClubs.values, toFilterableString: displayNameRenderer);

并访问name属性

ItemRenderer<SailingClub> displayNameRenderer = (SailingClub item) => item.name;

Answer 1

您是否在监听 Firebase 数据库的变化？

我不确定 _store 或它的任何属性到底是什么，但来自 Firebase DatabaseRef ，您可以监听更改，并更新您的选择选项。然后，更改检测应该检测到选择选项已更改。

sailingClubsRef.onValue((value) {
  filteredSailingClubs = new StringSelectionOptions(
    value.snapshot.val(),
    toFilterableString: displayNameRenderer,
  );  
});