我有一个正确的答案组件，我可以这样使用它
[(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>
最佳答案
这可能有用
<answer *ngFor="let answer of question.Answers let idx=index"
[(answer)]="question.Answers[idx]"></answer>
关于angular - 嵌套 ngFor 的双向数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40761079/