Question

所以我得到了这些组件，B和C类有不同的模板，如下所示。

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

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

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

在我的主要组件中，我需要通过A的数组进行迭代，并将其模板插入到HTML中。

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

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

所以我需要用'???'来填充这个地方使用适当的模板，而我正在迭代数组，但我真的不知道如何。如果我使用选择器，我真的不知道使用什么选择器。但如果我使用*ngFor我不知道应该使用什么属性。
你们能帮助我吗？ THX！

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

Answer 1

<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>

Angular2：如何遍历模板

1 个答案: