Javascript 反应性“材料选择”未按预期工作

一个表单中将向用户显示四个选择框。每个选择框必须具有唯一的值，并且这些选项来自

产品

集合。获取某个值后，select（选择）应作出反应性更改，以显示剩余的未标记选项

我的第一节课是指总体形式

class SelectForm extends BlazeComponent {
  onCreated() {
    super.onCreated();
    this._selected = new Mongo.Collection(null);
    _.range(4).map(i => this._selected.insert({
      slot: i,
      product: undefined
    }));
  }
}

然后，我为每个选择框都创建了一个类，该类会反应性地重新运行materialize的选择功能

class SelectBox extends BlazeComponent {
  onRendered() {
    super.onRendered();
    this.autorun(() => {
      const selected = this.parentComponent()._selected.find();
      this.$('select').material_select();
    });
  }
  taken() {
    return this.parentComponent()._selected.find({
      product: { $ne: undefined }
    }).map(product => product._id);
  }
  options() {
    return Products.find({
      _id: { $nin: this.taken() }
    }).map(product => ({
      label: product.name,
      value: product._id
    }));
  }
}

但是，这不会重新呈现选项，也不会更改其值

---

为什么会这样？如何反应性地更新材料选择？

为什么不使用autoform进行此操作？使用

getField

实现起来要容易得多。因为我在整个应用程序中只使用了两次它。您可以尝试

null

而不是

未定义的
为什么不为此使用autoform？使用
getField
实现起来要容易得多。因为我在整个应用程序中只使用了两次它。您可以尝试
null
而不是
未定义的