Angular2：如何迭代模板

所以我得到了这些组件，类B和C与不同的模板，如下所示。Angular2：如何迭代模板

@Component({}) 
export abstract class A {} 

@Component({ 
    template: `BBBBBB` 
}) 
export class B extends A{} 

@Component({ 
    template: `CCCCCC` 
}) 
export class C extends A{}

在我的主要成分，我需要遍历海槽的数组，并插入其模板的HTML。

@Component({ 
    template: ` 
    <div> 
    ...???... 
    </div> 
    ` 
}) 

export class MrModul { 
    anArray: A[] = Array(); 
    constructor(){ 
     ... 
     //filling up the Array 
     ... 
    } 
}

所以我需要填写'???'与适当的模板，而我遍历数组，但我真的不知道如何。如果我使用选择器，我不知道使用什么选择器。但如果我使用*ngFor我不知道我应该使用什么属性。
你们能帮我吗？谢谢！

奖金信息：我们的目标是拥有像小部件系统一样的东西。你可以选择并添加一个随机类型 - 让我们调用它 - 小部件，他们将被放入一个新的div。这是数组用于存储新小部件的内容。

来源

2017-03-06 HPeter

该数组包含哪些数据？取决于你想要显示什么组件的信息？ –

我同意Günter。我们需要更多关于数组的信息 – yurzui

aray包含B或C.所以我想要组件本身，例如B可以表示图像，C可以是图形等等等等，而这些需要单独的模板 – HPeter

<ng-content *ngFor="let item of anArray"> 
    <my-a *ngIf="item.compo == 'a'></my-a> 
    <my-b *ngIf="item.compo == 'b'></my-b> 
    <my-c *ngIf="item.compo == 'c'></my-b> 
</ng-content>

来源

2017-03-06 10:43:54

我需要一个更灵活的东西，我不知道会有多少种类型，但是我想避免写很多单独的if -s – HPeter

如果您可以将其他信息放入你的问题。更灵活的方法是http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 –

我会把这个标记为答案，因为我根据这个答案提出了解决方案。我只写了一个包装组件，然后使用了ngSwitch。谢谢！ – HPeter

Angular2：如何迭代模板

回答

相关问题