在 <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屋！