我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件:
<table> <th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </th> <tr> <my-component [data1]="data1" [data2]="data2"></my-component> </tr> <tr *ngFor="let item of list"> {{item}} </tr> </table>
在我的组件中,HTML是一些< td>< / td>使用从data1和data2呈现的数据.
但是在渲染之后,因为< my-component>< / my-component>我的CSS破解导致所有我的组件HTML(整个表行)显示在第1列.
上述结果:
<table> <th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </th> <tr> <my-component> <td>data1.prop1</td> <td>data1.prop2</td> </my-component> </tr> <tr *ngFor="let item of list"> {{item}} </tr> </table>
我尝试了以下方法:
@Component({ selector: '[my-component]',templateUrl: 'my-component.html' }) <tr my-component [data1]="data1" [data2]="data2"></tr>
但这导致错误无法绑定到’data1′,因为它不是’tr’的已知属性.
我也不能使用@Directive,因为我想渲染HTML.
如何渲染< my-component>< / my-component>的模板?没有< my-component>< / my-component>标签?
其他答案是先前版本的角度.我正在使用Angular 4.3.4.
任何帮助,将不胜感激..!
你需要在下面的选择器中包含tr,
@Component({ selector: 'tr[my-component]',template: ` <td>{{data1.prop1}}</td> <td>{{data1.prop2}}</td> <td>{{data2.prop1}}</td> ` }) export class MyComponent { @input() data1; @input() data2; }
检查这个Plunker !!
希望这可以帮助!!
原文地址:https://www.jb51.cc/angularjs/143651.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。