[英]Angular 5: ngModel binding not working
I am very sure that I am using the ngModel
correctly, but my model will not be updated when the textfield changes. 我非常确定自己使用的是
ngModel
,但是当文本字段更改时,我的模型将不会更新。 I have used this constellation several times in my app without any problems. 我已经在我的应用程序中多次使用了这个星座,没有任何问题。 I have been sitting on it for a while now and do not see my mistake, maybe a second pair of eyes will help.
我坐在上面已经有一段时间了,看不到我的错误,也许再换一双眼睛会有所帮助。 Could it be that the
ngIf
influences the binding? 可能是
ngIf
影响绑定吗?
I am using Angular5. 我正在使用Angular5。 And the Maseemann Components
以及Maseemann组件
UPDATE: 更新:
I edited the first textfield for testing like this: 我编辑了第一个文本字段进行如下测试:
<p>
<mdl-textfield type="text" label="Name" [(ngModel)]="assignment.name" (ngModelChange)="log()" floating-label></mdl-textfield>
{{assignment.name}}
</p>
And it is working as expected, the input is shown directly. 并且它按预期工作,直接显示了输入。 I have check several times for spelling but didn't find any error.
我已经检查了几次拼写,但是没有发现任何错误。
My template: 我的模板:
<mdl-card mdl-shadow="2" *ngIf="state === 0">
<mdl-card-title>
<h2 mdl-card-title-text>Assignment erstellen</h2>
</mdl-card-title>
<mdl-card-supporting-text>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--7-col">
<p>
<mdl-textfield type="text" label="Name" [(ngModel)]="assignment.name" (ngModelChange)="log()" floating-label></mdl-textfield>
</p>
<p>
<mdl-select [(ngModel)]="assignment.lang" placeholder="Programmiersprache auswählen">
<mdl-option [value]="'c'">C / C++</mdl-option>
<mdl-option [value]="'java'">Java</mdl-option>
<mdl-option [value]="'py'">Python</mdl-option>
<mdl-option [value]="'m'">Matlab</mdl-option>
</mdl-select>
</p>
<p>
<mdl-textfield type="number" label="Punkte" [(ngModel)]="assignment.points_recommended" floating-label></mdl-textfield>
</p>
<p>
<mdl-textfield type="text" label="Executionfilename" [(ngModel)]="assignment.execution_filename" floating-label></mdl-textfield>
</p>
<p>
<mdl-textfield type="text" label="Outputfilenames" [(ngModel)]="assignment.output_files" floating-label></mdl-textfield>
</p>
<div class="mdl-file_upload">
<h6>Evaluationfile:</h6>
<label for="file-upload" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
<span>Datei auswählen</span>
</label>
<mdl-textfield type="text" [(ngModel)]="assignmentFile.name" floating-label disabled></mdl-textfield>
<input type="file" id="file-upload" (change)="onFileSelect($event.target.files)">
</div>
<p>
<mdl-switch [(ngModel)]="assignment.visible_for_others" mdl-ripple>Öffentlich</mdl-switch>
</p>
<p>
<mdl-switch [(ngModel)]="assignment.text_editor_available" mdl-ripple>Online-Texteditor</mdl-switch>
</p>
</div>
<div class="mdl-cell mdl-cell--5-col">
<h6>Beschreibung</h6>
<p>...</p>
</div>
</div>
</mdl-card-supporting-text>
<mdl-card-actions mdl-card-border>
<button (click)="submitAssignment()" mdl-button mdl-colored mdl-ripple mdl-colored="primary">Nächster Schritt</button>
</mdl-card-actions>
</mdl-card>
My controller: 我的控制器:
export class AssignmentNewComponent implements OnInit {
public state: number = 0;
public assignment: Assignment = new Assignment(null, this.authService.getAccountId());
public assignmentFile: File = new File([''], 'Datei auswählen');
constructor(
private authService: AuthService,
private assignmentService: AssignmentService,
) { }
ngOnInit() {
this.testcases.push(new AssignmentTestCase());
}
onFileSelect(files: FileList): void {
this.assignmentFile = files[0];
}
setState(state: number): void {
this.state = state;
}
submitAssignment(): void {
Object.keys(this.assignment).forEach(
key => console.log(key, this.assignment[key])
)
}
next(): void {
this.state++;
}
previous(): void {
this.state--;
}
log(){
console.log(this.assignment);
}
}
My model: 我的模特:
export class Assignment {
public id: number;
public admin: number;
public name: string;
public lang: string;
public points_recommended: number;
public execution_filename: string;
public output_files: string;
public evaluation_file: string;
public visible_for_others: boolean;
public text_editor_available: boolean;
public created_at: string;
public updated_at: string;
constructor(
id?: number,
admin?: number,
name?: string,
lang?: string,
points_recommended?: number,
execution_filename?: string,
output_files?: string,
evaluation_file?: string,
visible_for_others?: boolean,
text_editor_available?: boolean,
created_at?: string,
updated_at?: string,
){
this.id = id || undefined;
this.admin = admin || undefined;
this.name = name || undefined;
this.lang = lang || undefined;
this.points_recommended = points_recommended || undefined;
this.execution_filename = execution_filename || undefined;
this.output_files = output_files || undefined;
this.evaluation_file = evaluation_file || undefined;
this.visible_for_others = visible_for_others || undefined;
this.text_editor_available = text_editor_available || undefined;
this.created_at = created_at || undefined;
this.updated_at = updated_at || undefined;
}
}
The problem was really easy to fix. 这个问题真的很容易解决。 I had an angular ID
<span #assignment>..
which newly bound my assignment variable to this assignment. 我有一个角度ID
<span #assignment>..
。 Just a naming problem. 只是一个命名问题。 I renamed the id now it is working as expected.
我已将其重命名,现在它可以按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.