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：如何迭代模板

回答

相關問題