我有一个表,我想在其中显示一个表行,它是一个组件。我还想将数据传递给该组件:
<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>
在my-component
, HTML 是几个 <td></td>
使用从 data1
呈现的数据和 data2
.
但是渲染之后,因为<my-component></my-component>
我的 CSS 中断导致所有 my-component
HTML(整行表格)显示在第一列。
以上结果:
<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>
但这会导致错误 Can't bind to 'data1' since it isn't a known property of 'tr'
.
我也不能使用@Directive
因为我想呈现 HTML。
如何呈现 <my-component></my-component>
的模板?没有<my-component></my-component>
标签?
其他答案是以前版本的 Angular 。我正在使用 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 !!
关于html - 从 angular 4 中的 html 中删除主机组件标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46671235/