gpt4 book ai didi

Angular2 不适合我的用例

转载 作者:太空狗 更新时间:2023-10-29 18:02:11 26 4
gpt4 key购买 nike

编辑:我找到了 [ngTemplateOutlet]这似乎更合适。讨论在 Can't get ngTemplateOutlet to work 中继续

原始问题:

我已经构建了一个表格组件,我将在多个不同的 View 中使用它来呈现不同的数据。该数据及其表示应由表组件的使用者控制。

我尝试使用 <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", gearbox: "manual" },
{ model: "ford", color: "blue", 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表组件消费者当然不能选择它。

很可能还有额外的“不要”。

因为我是 Angular 2 的新手,所以我希望我弄错了什么,或者我使用了错误的工具。有什么想法吗?

最佳答案

[ngTemplateOutlet][ngOutletContext] 一起更适合此用例。相同用例的工作示例在: Can't get ngTemplateOutlet to work

关于Angular2 <ng-content> 不适合我的用例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40405279/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com