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

Answer 2

试试这个： -

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

通过这样做，你重复div块，每次重复都有一个文本和按钮。 如果有什么不清楚的地方请尽可能问我或发帖。

Answer 3

我会考虑用</choice>关闭