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

Posted 2023-03-05

【中文标题】在 div 中使用 ngFor 时，Angular 2 模板解析错误

【英文标题】：Angular 2 Template parse errors when using ngFor inside div

【发布时间】：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">

【参考方案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>