[英]Remove host component tag from html in angular 4
I have a table in which I want to display a table row, which is a component.我有一个表格,我想在其中显示一个表格行,它是一个组件。 And also I want to pass data to that component:
而且我想将数据传递给该组件:
<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>
In my-component
, the HTML is a few <td></td>
with data rendered from data1
and data2
.在
my-component
,HTML 是一些<td></td>
其中包含从data1
和data2
呈现的数据。
But after rendering it, because of <my-component></my-component>
my CSS is breaking resulting in all my-component
HTML (whole table row) displaying in 1st column.但是在渲染它之后,由于
<my-component></my-component>
我的 CSS 被破坏,导致所有my-component
HTML(整个表格行)显示在第一列中。
Result of above:以上结果:
<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>
I tried the following:我尝试了以下方法:
@Component({
selector: '[my-component]',
templateUrl: 'my-component.html'
})
<tr my-component [data1]="data1" [data2]="data2"></tr>
But this results in error Can't bind to 'data1' since it isn't a known property of 'tr'
.但这会导致错误
Can't bind to 'data1' since it isn't a known property of 'tr'
。
Also I can not use @Directive
as I want to render HTML.我也不能使用
@Directive
因为我想呈现 HTML。
How can I render template of <my-component></my-component>
without <my-component></my-component>
tag?如何在没有
<my-component></my-component>
标签的情况下呈现<my-component></my-component>
模板?
Other answers are of previous versions of angular.其他答案是以前版本的 angular。 I am using Angular 4.3.4.
我正在使用 Angular 4.3.4。
Any help would be appreciated..!任何帮助,将不胜感激..!
you need to include tr as well in selector like below,您还需要在选择器中包含 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.