从angular 4中的html中删除主机组件标记

发布时间：2020-12-17 07:57:14 所属栏目：安全来源：网络整理

导读：我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件： table th tdcol 1/td tdcol 2/td tdcol 3/td /th tr my-component [data1]="data1" [data2]="data2"/my-component /tr tr *ngFor="let item of list" {{item}} /tr/table 在

我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件：

<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>

在我的组件中,HTML是一些< td>< / td>使用从data1和data2呈现的数据.

但是在渲染之后,因为< my-component>< / my-component>我的CSS破解导致所有我的组件HTML(整个表行)显示在第1列.

上述结果：

<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.

如何渲染< my-component>< / my-component>的模板？没有< my-component>< / my-component>标签？

其他答案是先前版本的角度.我正在使用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 !!

希望这可以帮助！！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!