在 <tr> 中嵌入 Angular 指令 [英] Embedding an Angular Directive in <tr>
问题描述
我试图让一个角度指令在 <tr>
内重复.没有指令,代码是
<td style='display: flex;弹性方向:列;宽度:40%;最小宽度:300px;'><span>{{ cluster.Name }}</span><span>{{ cluster.StatusMessage }}</span></td><td style='width: 100%;'>...</td></tr>看起来像
当我重构指令时,我丢失了 格式.重构后的代码是<cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row></tr>簇行组件代码为:
<span>{{ name }}</span><span>{{ statusMessage }}</span></td><td style='width: 100%;'>...</td>它有效,但 格式消失了.开发人员工具显示了一个 ,其中嵌套了一个
,以及两个 >s 嵌套在里面,正如我所期望的. 解决方案 不能包含
元素.>您可以使用属性选择器代替
<td cluster-row [name]='cluster.Name' [statusMessage]='cluster.StatusMessage'></cluster-row></tr>与
@Component({//@指示({选择器:'[集群行]'
组件或指令然后是,因此你不能在组件模板中重复它style='display: flex;弹性方向:列;宽度:40%;最小宽度:300px;'
可以添加到
@Component({选择器:'[集群行]',风格:[...],
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>
And looks like
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>
The cluster-row component code is:
<td style='display: flex; flex-direction: column; width: 40%; min-width: 300px;'>
<span>{{ name }}</span>
<span>{{ statusMessage }}</span>
</td>
<td style='width: 100%;'>
...
</td>
It works, but the <tr>
formatting goes away.
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>
can't contain a <cluster-row>
element.
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>
with
@Component({
//@Directive({
selector: '[cluster-row]'
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;'
can just be added to
@Component({
selector: '[cluster-row]',
styles: [...],
这篇关于在 <tr> 中嵌入 Angular 指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆