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

时间:2016-05-29 06:59:39

标签: javascript html css angularjs angular

为什么Angular 2不允许我使用* ngFor?

在div-block中创建一组子视图

案例:

// MARK - this one gives me problem..        
func updateRecords(entityName: String, predicate: NSPredicate, keyValue: [String:AnyObject]) -> AnyObject {
  let request = NSBatchUpdateRequest(entityName: entityName)
  request.predicate = predicate
  request.propertiesToUpdate = keyValue
  request.resultType = .UpdatedObjectIDsResultType
  do {
    let responses = try managedContext.executeRequest(request) as! NSBatchUpdateResult
    return responses.result!
  } catch let error as NSError {
    return error
  }
}

原因

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

3 个答案:

答案 0 :(得分:4)

Parser 期望<{em> @SerializedName代码先关闭<choice>

尝试以下

<div>

答案 1 :(得分:2)

试试这个: -

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

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

答案 2 :(得分:1)

我会考虑使用</choice>

关闭