Angular2はオブジェクトのリストからサブコンポーネントをレンダリングします

Question

私はアコーデオンを実装するランディングページを持っています。アコーディオン内のグループ数は、プロパティ（タイトル、アクティブ...など）を定義するオブジェクトのリストによって管理されます。アコーディオンの各パネルには、特定のサブコンポーネントが含まれています。私は、次のようなグループを定義したいと思います：

@Component({ 
    selector: 'aa-home', 
    template: require('./home.component.html'), 
    styles: [require('./home.component.scss')], 
    directives: [ACCORDION_DIRECTIVES, QUOTE_COMPONENTS] 
}) 
export class HomeComponent implements OnInit { 
    public oneAtATime: boolean = true; 
    public groups: AccordianGroup[] = []; 

    constructor() { 
     this.groups.push(new AccordianGroup(true, 'Quote', 'quote', '<aa-quote (response)="onContinue($event)"></aa-quote>')); 
     this.groups.push(new AccordianGroup(false, 'Introduction', 'intro', '<aa-intro (response)="onContinue($event)"></aa-intro>')); 
     this.groups.push(new AccordianGroup(false, 'Applicant Information', 'applicant', '<aa-applicant (response)="onContinue($event)"></aa-applicant>')); 
     this.groups.push(new AccordianGroup(false, 'Details', 'details', '<aa-details(response)="onContinue($event)"></aa-details>')); 
     this.groups.push(new AccordianGroup(false, 'Review', 'review', '<aa-review (response)="onContinue($event)"></aa-review>')); 
     this.groups.push(new AccordianGroup(false, 'Payment', 'payment', '<aa-payment (response)="onContinue($event)"></aa-payment>')); 
    } 

    ngOnInit() { 
     console.log(_.capitalize('starting home')); 
    } 

    onContinue(message): void { 
     let index = _.findIndex(this.groups, function(x) { return x.name === message.componentName; }); 
     if (index < this.groups.length - 1) { 
      this.groups[index].isActive = false; 
      this.groups[index + 1].isActive = true; 
     } 
    } 

    toggleActive(group): void { 
     this.groups.forEach(function(x) { x.isActive = false; }); 
     group.isActive = !group.isActive; 
    } 
} 

class AccordianGroup { 
    constructor(
     public isActive: boolean, 
     public title: string, 
     public name: string, 
     public template: string 
    ) { } 
} 

このようなHTML：

<div *ngFor="let group of groups"> 
    <div class="accordion" (click)=toggleActive(group)>{{group.title}}</div> 
    <div class="panel" [ngClass]="{show: group.isActive}" [innerHTML]="group.template"></div> 
</div> 

これは動作しません...何もレンダリングされませんが。私はこれを間違った方法で行っているように感じますが、これを並べ替えることはできません。この背後にあるアイデアは、ユーザーに応じて...私はいくつかのグループをフィルタリングする必要があり、実際には... 1つの行を除いて全く同じコードを持つhtmlのダース以上のグループを持っていない配置される。これも可能ですか？

Answer 1

newでコンポーネントを作成することはできません。コンポーネントは、どちらかViewContainerRef.createComponent()例えばViewContainerRef.createComponent()

からのためのビューでHTMLからの角度によって作成されAngular 2 dynamic tabs with user-click chosen componentsを参照してください（それは非常に類似したユースケースです）

データ（モデル）を構築するマークアップからコンポーネントを作成するにはを親コンポーネントクラスに追加し、AccordianGroupのセレクタを使用して要素を作成します。

public groups: AccordianGroup[] = []; 
constructor() { 
    this.groups = [...]; 
... 
} 

<div *ngFor="let group of groups"> 
    <div class="accordion" (click)=toggleActive(group)>{{group.title}}</div> 
    <div class="panel" [ngClass]="{show: group.isActive}"><accordian-group [data]="group.data"></accordian-group></div> 
</div>