是否可以动态生成 md 选项元素

Question

我有一个Web应用程序，我在其中使用来自角度材料的<md-select>元素。选项值由如下所示的服务提供：

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

只有"名称"变量在不同的形式上发生变化，所以我应该在我的应用程序中的任何地方复制这个代码片段。我想创建一个可重用的组件或指令，它可以通过名称生成此代码片段。我尝试将整个<md-select>包装到自定义控件值访问器中，但在这种情况下，内部窗体控件(md-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，因为它希望其中的直接子组件是MdOption的实例。

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

<md-select>
    <div>
        <md-option value="hah">Hah</md-option>
    </div>
</md-select>