使用ngFor inside div时,Angular 2 Template解析错误

Question

为什么Angular 2不允许我使用*ngFor在div-block中创建一组子视图？

案子:

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
}

原因

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

但是以下工作正常,但我希望在同一个面板中有问题和选择按钮.

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

Answer 1

解析器期望 <choice>标签首先关闭，直到<div>。

尝试以下

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