Angular 使用嵌套ngFor的双向数据绑定

我有一个正确的答案组件，我可以这样使用它

[(answer)]="answer"

这一切都是好的火灾事件，它确实工作。 问题对象包含答案[]。当我尝试使用它时：

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

我收到一个例外

无法分配给引用或变量；区域：；任务：承诺；值：错误：无法分配给引用或变量！（…）错误：无法分配给引用或变量

任何人都知道为什么会抛出异常

回答.组件.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);
    }
}

@组件({
moduleId:module.id，
选择器：'回答'，
templateUrl:'answer.component.html'，
})
导出类AnswerComponent扩展ComponentBase实现OnInit{
@输入（）答案：答案；
@Output（）answerChange:EventEmitter=neweventemitter（）；
private _i切换：布尔值；
@Input（）集合已切换（值：布尔值）{
此._isToggled=（值==未定义）？false:值；
}
变慢{
把这个还给我；
}
构造函数（）{
超级（）；
}
恩戈尼尼特（）{
this.requestMaterialDesignUpdate（）；
}
切换（）{
this.isToggled=！this.isToggled；
this.requestMaterialDesignUpdate（）；
}
answerTextChanged（输入：任意）{
this.answerChange.emit（this.answer）；
}
MarkansweraCorrect（事件：事件）{
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>

请发布应答组件的代码。除了您的问题之外，不建议在向孩子传递数据时使用双重数据绑定。您更应该使用事件并从您的应答组件在其上注册。像

@Günter Zöchbauer更新为code@Maxime例如，您可以同时使用[（ngModel）]和（change）。使用例如[（答案）]代替and（答案更改）有什么问题？我在教程中没有看到任何关于将数据传递给孩子的建议。双数据绑定是从上到下传递数据，从下到上传递事件。这只是

[childProp]=“parentProp”（childPropChange）=“parentProp=$event”

对不起，在

[idx]之前有一个多余的
s
。回答
我用这种方式来处理它
。但为什么angular不明白简单的方法[（答案）]=“答案”？对不起，我读你们的代码时有点草率
[（answer）]=“answer”
是
[answer]=“answer”（answerChange）=“answer=$event”
的语法糖，但不支持为
*ngFor
变量指定不同的值。我发现，如果我们将对象输入子组件，我们实际上会发送当前对象的引用。这样我们就不需要双向数据绑定，我们可以编写
。AnswerComponent内答案的每一次更改都会更改原始对象。有关详细信息，请参阅相关问题-