Angular2不适合我的用例

前端之家收集整理的这篇文章主要介绍了Angular2不适合我的用例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
编辑:我发现[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的新手,所以我希望我误会了某些事情,或者说我使用了错误的工具.有任何想法吗?

解决方法

@H_404_44@ [ngTemplateOutlet]和[ngOutletContext]更适合这个用例.以下是相同用例的工作示例:
Can’t get ngTemplateOutlet to work

猜你在找的Angularjs相关文章