【问题标题】:Binding material-select to my model将材料选择绑定到我的模型
【发布时间】:2017-11-14 12:40:00
【问题描述】:

我有一个简单的用例 - 我有一个丰富的对象模型,我在 AngularDart 应用程序中使用,我想要一个组件来显示模型的一个字段的当前状态,我想调用选择更改时模型上的方法(最终将更新绑定到 的字段)。

类似这样的:

应用组件.dart:

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [CORE_DIRECTIVES, materialDirectives],
  providers: const [materialProviders],
)
class AppComponent {
  Model myModel = new MyModel();
  SelectionModel<String> selectModel = new SelectionModel();
}

应用组件.html:

<material-dropdown-select
   [options]='myModel.listOfOptions'
   [buttonText]='myModel.currentOption'
   [selection]='selectModel'>
   <!-- call myModel.changeOption(selectedOption) when selection changes -->
</material-dropdown-select>

【问题讨论】:

    标签: dart material-design angular-dart angular-components


    【解决方案1】:
    selectModel.selectionChanges.listen(update);
    
    void update(List<SelectionChangeRecord> record) {
      ...
    }
    

    【讨论】:

    • 嗨,你能在 github 上分享你的代码吗?我有一个错误:EXCEPTION: Assertion failed: org-dartlang-app:///packages/angular_components/material_select/material_dropdown_select_accessor.dart:118:12 _select.selection == null "Cannot set [selection] when using a Dropdown control value accessor."
    【解决方案2】:

    将 setter 附加到您的 selectModel 成员,并在其中运行代码并更新“真实”值(私有成员)。你当然需要匹配的吸气剂。

    【讨论】:

    • 我还是有点迷茫……谁叫二传手?
    • 我知道我可能很密集,但是像这样吗? SelectionModel _selectModel = new SelectionModel(); SelectionModel 获取 selectModel { return _selectModel; } 设置 selectModel(SelectionModel model) { _selectModel = model; _selectModel.selectionChanges.listen(updateSelection);如果是这样,它不工作。未调用 setter 以响应更改选择。
    • 您可能希望代码在角度生命周期的错误点更新值。也许webdev.dartlang.org/angular/guide/lifecycle-hooks 会更清楚。您可能在改变有机会传播之前就在寻找改变。
    • 我在设置器中放置了一个“打印”语句,它没有向控制台打印任何内容。您可以提供一个最小的工作示例吗?
    【解决方案3】:

    我希望这个live example 可以帮助你,如果有兴趣请看source code

    【讨论】:

      猜你喜欢
      • 2020-02-29
      • 1970-01-01
      • 1970-01-01
      • 2020-01-13
      • 1970-01-01
      • 2020-12-07
      • 1970-01-01
      • 1970-01-01
      • 2016-04-01
      相关资源
      最近更新 更多