问题描述
限时送ChatGPT账号..我有一个表格,我想在其中显示一个表格行,它是一个组件.而且我想将数据传递给该组件:
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>
在my-component
中,HTML是一些<td></td>
,数据从data1
和<代码>数据2代码>.
In my-component
, the HTML is a few <td></td>
with data rendered from data1
and data2
.
但是在渲染它之后,由于
我的 CSS 被破坏导致所有 my-component
HTML(整个表格行)显示在第一列.
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.
以上结果:
<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.
Also I can not use @Directive
as I want to render HTML.
如何在没有
的情况下渲染
的模板标签?
How can I render template of <my-component></my-component>
without <my-component></my-component>
tag?
其他答案是以前版本的 angular.我使用的是 Angular 4.3.4.
Other answers are of previous versions of angular. I am using Angular 4.3.4.
任何帮助将不胜感激..!
Any help would be appreciated..!
推荐答案
你还需要在选择器中包含 tr,如下所示,
you need to include tr as well in selector like below,
@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!!
这篇关于在 angular 4 中从 html 中删除主机组件标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论