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