我在ANGLE中创建了一个简单的表格包装组件.在第1栏的包装器组件中,我想要显示自定义模板.

我的主要挑战是在这里仅在Parent Component中编写该列的所有模板.

表示我在Parent中给出的任何模板,在该特定行应该显示该模板.

我试过这样的东西

Stackblit Link

推荐答案

您在代码示例中做的每件事都是正确的,您所需要的就是在您的html文件中添加一个ng-template,它就会工作得很好.

使用您的行代码:

<tr *ngFor="let item of options">
      <td>
        <ng-container
          *ngTemplateOutlet="columnTemplate; context: { $implicit: item }"
        ></ng-container>
      </td>
      <td>{{ item.address }}</td>
    </tr>

添加此项将显示项目名称:

<ng-template #columnTemplate let-item>
  {{ item.name }}
</ng-template>

工作example

如果您需要更复杂的东西,我建议您构建一个服务来在这个组件和父组件之间共享数据.

Html相关问答推荐

删除第一个列表项上的左边框

Chrome和Safari浏览器中的CSS3动画不同

将网格包装在css中

如何在div中淡入和淡出渐变背景?

带有多种 colored颜色 的HTML按钮

我怎样才能在我的网站上制作花哨的角落

每个元素的CSS网格高度相等,以保持响应性

HX-POST未使用正确的操作(路径)

(HTML框架标签)点击后目标框架将不再工作

在移动屏幕上显示时分支树视图的响应能力问题

Div 容器不会遵守边距、填充或间隙

四开:如何右对齐 PDF *和* HTML 中的文本

如何实现与内嵌图像对齐的自动换行?

Sass 混合动画未正确应用

如何消除线性渐变线的模糊?

将图像高度调整到容器 div 中而不使其高度增加

单击按钮时更改字体真棒图标

删除按钮组件时 bootstrap col-auto 布局高度对齐中断

具有淡入/淡出效果的 CSS 选框

无法使用 HTML 中的 Bootstrap 自上而下居中