Question

我有一个Web应用程序，我使用angular-material中的<md-select>元素。选项值由以下服务提供：

<md-option *ngFor="let option of settingsService.getOption(name)" [value]="option.description">
    {{option.description}}
</md-option>

只有'name'varibale在不同的表单上发生变化，所以我必须在我的应用程序中的任何地方复制此代码段。我想创建一个可重用的组件或指令，它可以通过名称生成此代码段。我试图将整个<md-select>包装到自定义控件值访问器中，但在这种情况下，内部表单控件（md-select的控件）将不会收到有关验证更改的通知。是否有可能以某种方式生成这些选项，以便我可以将表单控件放到select元素？

Answer 1

简短回答：不，它不起作用。。

md-select的工作原理是查询ContentChildren内部MdOption组件的实例，因为它是直接子项。如果您使用自定义组件：

@Component({
    select: 'foo-options',
    template: `
        <md-option value="some">Some Value</md-option>
    `
})
class AutoCompileOptionsComponent {}

然后使用：

<md-select>
    <foo-options></foo-options>
</md-select>

以这种方式执行时，md-select不会“看到”md-option组件，因为它ContentChildren因为它期望其中的直接子组件是{{1}的实例}}

奇怪的是，当不使用自定义组件时，它确实有效：

MdOption

是否可以动态生成md-option元素？

1 个答案: