我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件：
<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,
原文链接：https://www.f2er.com/angularjs/143651.html@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 !!
希望这可以帮助！！
