在 div 中使用 ngFor 时，Angular 2 模板解析错误答案

【问题标题】：Angular 2 Template parse errors when using ngFor inside div在 div 中使用 ngFor 时，Angular 2 模板解析错误
【发布时间】：2016-09-27 04:32:56
【问题描述】：

为什么 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">

【问题讨论】：

标签： javascript html css angularjs angular

【解决方案1】：

我会考虑关闭</choice>

【讨论】：

【解决方案2】：

试试这个：-

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

这样做是在重复 div 块，每次重复都有一个文本和按钮。如果有不清楚的地方，请询问我或尽可能发布 plunker。

【讨论】：

【解决方案3】：

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

尝试关注

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

【讨论】：