如何将组件 ID 作为父相对路径绑定到模板内的 HTML 元素

Question

我正在使用 Angular2 RC1 版本和 Material Design Lite。
我要实现一个独立的网格组件。名为 Id 的自定义属性用于标识组件。

export class GridComponent {

  @Input() public id: string;

}

当我将 Id 属性绑定到 UL 标签的 'for' 属性时，我遇到了问题。像下面的代码片段：

<button class="mdl-button" id="{{id}}-viewColumn">
    <i class="material-icons">view_column</i>
</button>

<ul class="mdl-menu" for="{{id}}-viewColumn">
    <li *ngFor="xxx">
    </li>
</ul>

然后错误提示“无法绑定到 'for'，因为它不是已知的本机属性”。
但我必须使用 'UL' 标签。 'UL' 代码在 https://getmdl.io/components/#menus-section.
之后我想知道你会如何处理这个案子？
提前谢谢你。

Answer 1

原生元素上没有属性。您可以在 ul 中添加标签吗？ <label [attr.for]="{{id}}-viewColumn">。

Answer 2

显然必须添加为属性而不是属性。

使用

<ul [attr.for]="id"

或

<ul attr.for="{{id}}"

如何将组件 ID 作为父相对路径绑定到模板内的 HTML 元素

How to bind component id as parent relative path to HTML element inside template

html

javascript

material-design-lite

angular