Angular 5：ngModel綁定不起作用

Question

我非常確定自己使用的是ngModel ，但是當文本字段更改時，我的模型將不會更新。 我已經在我的應用程序中多次使用了這個星座，沒有任何問題。 我坐在上面已經有一段時間了，看不到我的錯誤，也許再換一雙眼睛會有所幫助。 可能是ngIf影響綁定嗎？

我正在使用Angular5。 以及Maseemann組件

---

更新：

我編輯了第一個文本字段進行如下測試：

<p>
  <mdl-textfield type="text" label="Name" [(ngModel)]="assignment.name" (ngModelChange)="log()" floating-label></mdl-textfield>
  {{assignment.name}}
</p>

並且它按預期工作，直接顯示了輸入。 我已經檢查了幾次拼寫，但是沒有發現任何錯誤。

---

我的模板：

<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>

我的控制器：

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);
  }

}

我的模特：

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;
    }
}

Answer 1

這個問題真的很容易解決。 我有一個角度ID <span #assignment>.. 。 只是一個命名問題。 我已將其重命名，現在它可以按預期工作。