Köşeli 2 Şablon ngFor İçinde Kullanılırken Ayrıştırma Hataları

Question

Neden Angular 2, * ngFor? Kullanılarak div bloğu içinde alt görünümler oluşturmama izin vermiyor?

durum:

import {Component, Input} from '@angular/core'; 
import {ChoiceComponent} from './choice.component'; 
import {Question} from './model/Question'; 

@Component({ 
    selector: 'question', 
    template: ` 
    <div class="panel"> 
    {{question.text}} 
    <choice *ngFor="let choice of question.choices" [choice]="choice"> 
    </div> 
    `, 
    directives: [ChoiceComponent] 
}) 
export class QuestionComponent { 

    @Input() 
    question: Question; // Input binding from category component ngFor 
} 

Ancak şu

EXCEPTION: Template parse errors: 
Unexpected closing tag "div" (" 
    <div class="panel"> 
    <choice *ngFor="let choice of question.choices" [choice]="choice"> 
    [ERROR ->]</div> 
    "): QuestionComponent@3:4 

neden çalışıyor, ama aynı panel iç soru seçim düğmeleri sahip olmak istiyorum.

<div class="panel"> 
    {{question.text}} 
</div> 
<choice *ngFor="let choice of question.choices" [choice]="choice"> 

Answer 1

Ayrıştırıcı <choice> etiketi <div> kadar ilk tamamlanmasını umduğu.

deneyin

<div class="panel"> 
    {{question.text}} 
    <choice *ngFor="let choice of question.choices" [choice]="choice"> 
    </choice> 
</div> 

Answer 2

bu Aşağıdakilerden birini deneyin: - Bunu yaparken sen div bloğunu tekrar ve her tekrarlanan bir metin ve düğme var olan By

<div class="panel" *ngFor="let choice of question?.choices"> 
{{question.text}} 
<choice [choice]="choice"> </choice> 
</div> 

. Eğer bir şey henüz belirsiz ise lütfen bana ya da mümkünse plunker gönderin.

Answer 3

</choice>

ile kapatın