2016-11-23 85 views
2

結合我有一個正確的答案組件,我可以使用這種方式雙向數據嵌套ngFor

[(answer)]="answer" 

這是所有好火事件和它的工作。 Question對象包含Anser []。當我嘗試使用它:

<answer *ngFor="let answer of question.Answers" [(answer)]="answer"></answer> 

我收到異常

Cannot assign to a reference or variable! ; Zone: ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!(…) Error: Cannot assign to a reference or variable!

任何人有一個想法,爲什麼是拋出異常。

answer.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'answer', 
    templateUrl: 'answer.component.html', 
}) 
export class AnswerComponent extends ComponentBase implements OnInit { 
    @Input() answer: Answer; 
    @Output() answerChange: EventEmitter<Answer> = new EventEmitter<Answer>(); 

    private _isToggled: boolean; 
    @Input() set isToggled(value: boolean) { 
     this._isToggled = (value === undefined) ? false : value; 
    } 

    get isToggled() { 
     return this._isToggled; 
    } 

    constructor() { 
     super(); 
    } 

    ngOnInit() { 
     this.requestMaterialDesignUpdate(); 
    } 


    toggle() { 
     this.isToggled = !this.isToggled; 
     this.requestMaterialDesignUpdate(); 
    } 

    answerTextChanged(input: any) { 
     this.answerChange.emit(this.answer); 

    } 

    markAnswerAsCorrect(event: Event) { 
     this.answer.IsCorrect = !this.answer.IsCorrect; 
     this.answerChange.emit(this.answer); 
    } 
} 

answer.component.html

<div class="display-flex-nowrap textbookDetailsContainer"> 
    <div class="padding-2rem answerBorderLeft cursor-pointer width100"> 
     <header (click)="toggle()" class="answerRowOrder"> 
      <div> 
       <i *ngIf="!isToggled" class="material-icons">arrow_drop_down</i> 
       <i *ngIf="isToggled" class="material-icons">arrow_drop_up</i> 
      </div> 
      <span class="part-text" [innerHTML]="answer.Text"></span> 
     </header> 
     <div *ngIf="isToggled" class="padding-2rem"> 
      <ckeditor rows="3" [(ngModel)]="answer.Text" (change)="answerTextChanged($event)" name="answer" [config]="{ extraPlugins: 'justify,image2,divarea', removePlugins: 'about'}"></ckeditor> 
     </div> 
    </div> 
    <div class="padding-2rem answerBorderRight checkboxBigSize"> 
     <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect float-left"> 
      <input type="checkbox" class="mdl-checkbox__input" [checked]="answer.IsCorrect" (change)="markAnswerAsCorrect($event)"> 
     </label> 
    </div> 
</div> 
+0

請張貼代碼的答案組件。 –

+0

除了您的問題,在向孩子傳遞數據時,不建議使用雙數據綁定。您應該使用事件並從您的答案組件中對其進行註冊。例如,你可以使用[<答案* ngFor =>讓​​答案的question.Answers'[答案] =「答案」(onAnswerChange)=「handleSomeLogicFunction()」>' – Maxime

+0

@GünterZöchbauer更新代碼 – unsafePtr

回答

3

這可能會實現

<answer *ngFor="let answer of question.Answers let idx=index" 
    [(answer)]="question.Answers[idx]"></answer> 
+0

**無法讀取屬性'0'的undefined ** – unsafePtr

+0

對不起,在[[idx] .answer'之前有一個多餘的's' –

+0

我以這種方式得到它' '。但爲什麼角度不明白只是簡單的方法[(回答)] =「答案」? – unsafePtr