在< tr>中嵌入角度指令 [英] Embedding an Angular Directive in <tr>
问题描述
我正在尝试获取在<tr>
内部重复的角度指令.如果没有该指令,则代码为
I'm trying to get an angular directive to repeat inside a <tr>
. Without the directive, the code is
<tr *ngFor='let cluster of clusters'>
<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
<span>{{ cluster.Name }}</span>
<span>{{ cluster.StatusMessage }}</span>
</td>
<td style='width: 100%;'>
...
</td>
</tr>
看起来像
重构指令时,我丢失了<tr>
格式.重构后的代码是
When I refactor the directive, I lose the <tr>
formatting. The refactored code is
<tr *ngFor='let cluster of clusters'>
<cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>
集群行组件代码为:
<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
<span>{{ name }}</span>
<span>{{ statusMessage }}</span>
</td>
<td style='width: 100%;'>
...
</td>
它可以工作,但是<tr>
格式消失了.
It works, but the <tr>
formatting goes away.
开发人员工具显示了一个<tr>
和一个嵌套的<cluster-row>
嵌套的<tr>
,正如我期望的那样.
The developer tools show a <tr>
with a <cluster-row>
nested in it, and two <td>
s nested in that, as I would expect.
推荐答案
<tr>
不能包含<cluster-row>
元素.
您可以改为使用属性选择器,例如
You can use an attribute selector instead like
<tr *ngFor='let cluster of clusters'>
<td cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row>
</tr>
使用
@Component({
//@Directive({
selector: '[cluster-row]'
该组件或指令是<td>
,因此您不能在组件模板中重复它
The component or directive then is the <td>
, therefore you can't repeat it inside the components template
style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'
可以直接添加到
@Component({
selector: '[cluster-row]',
styles: [...],
这篇关于在< tr>中嵌入角度指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!