将 material-select 绑定到我的模型

Question

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

像这样：

应用-component.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();
}

应用-component.html:

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

Answer 1

将 setter 附加到您的 selectModel 成员，运行代码以及更新 "real" 值（私有成员）。当然，您需要匹配 getter。

Answer 2

selectModel.selectionChanges.listen(update);

void update(List<SelectionChangeRecord> record) {
  ...
}

Answer 3

我希望如果这个live example could help you, if interested see the source code.

将 material-select 绑定到我的模型

Binding material-select to my model

dart

angular-dart

material-design

angular-components