Angular2不适合我的用例
发布时间:2020-12-17 17:01:03 所属栏目:安全 来源:网络整理
导读:编辑:我发现[ngTemplateOutlet]似乎更适合.讨论在 Can’t get ngTemplateOutlet to work继续进行 原始问题: 我已经构建了一个表组件,我将在多个不同的视图中使用它来呈现不同的数据.该数据及其表示应由表组件的使用者控制. 我尝试使用 ng-content传递一个
编辑:我发现[ngTemplateOutlet]似乎更适合.讨论在
Can’t get ngTemplateOutlet to work继续进行
原始问题: 我已经构建了一个表组件,我将在多个不同的视图中使用它来呈现不同的数据.该数据及其表示应由表组件的使用者控制. 我尝试使用< ng-content>传递一个“渲染器”,它知道如何检索该数据以及如何呈现它.您可能理解,这是非法使用. 以下是我尝试使用< ng-content>的简化方法. 这是表组件模板: <table> <thead> <tr> <th *ngFor="let column in columns">{{column.heading}}</th> <tr> </thead> <tbody> <tr *ngFor="let item of items> <td *ngFor="let column of columns> <ng-content select="{{column.template}}"></ng-content> </td> </tr> </tbody> </table> 以下是表组件的用法: <my-table-component [items]="cars" [columns]="carColumns"> <div class="model">{{item.model}}</div> <div class="color">{{item.color}}</div> <div class="gearbox>{{item.gearbox}}</div> </my-table-component> 以下是示例数据: cars = [ { model: "volvo",color: "blue",gearbox: "manual" },{ model: "volvo",color: "yellow",{ model: "ford",gearbox: "automatic" },{ model: "mercedes",color: "silver",gearbox: "automatic" } ]; carColumns = [ { heading: "Model",template: ".model" },{ heading: "Color",template: ".color" },{ heading: "Gear Box",template: ".gearbox" } ]; 通过这个我希望你明白我想做什么.显而易见的问题似乎是< ng-content>在“循环”中不起作用,它不接受动态“选择”.此外,item当然不能选择表组件使用者. 很可能还有其他“不要”. 因为我是棱角分明2的新手,所以我希望我误会了某些事情,或者说我使用了错误的工具.有任何想法吗? 解决方法
[ngTemplateOutlet]和[ngOutletContext]更适合这个用例.以下是相同用例的工作示例:
Can’t get ngTemplateOutlet to work (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |