angular - Oupptäckt fel: Kan inte tilldela en referens eller > variabel! > vid _AstToIrVisitor.visitPropertyWrite

Jag följde ett exempel från angular.io-webbplatsen om hur man skapar ett formulär i Angular med ett inputfält, men jag har fastnat på ett fel:

compiler.js:26390 Okänt fel: Kan inte tilldela till en referens eller variabel! vid _AstToIrVisitor.visitPropertyWrite (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26611:23) vid PropertyWrite.visit (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:4900:24) vid convertActionBinding (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:26035:45) vid eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28635:22) vid Array. forEach() vid ViewBuilder._createElementHandleEventFn (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28631:18) vid nodes.(anonym funktion) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28050:27) vid eval (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28576:22) vid Array.map() vid ViewBuilder._createNodeExpressions (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:28575:56)

Den enda ändringen jag gjorde var att byta namn på "name" till "username".

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  username: string;
  submitted = false;

  constructor() { 
  }

  ngOnInit() {
  }

  onSubmit() { this.submitted = true; }

}

dashboard.component.html

<div class="row justify-content-md-center">
    <div class="col col-lg-12">
      <form (ngSubmit)="onSubmit()" #usernameForm="ngForm" >
        <div class="form-group">
          <label for="username">Name</label>                    

          <input type="text" class="form-control" id="name"
          required
          [(ngModel)]="username" name="name"
          #username="ngModel">

          <div [hidden]="username.valid || username.pristine"
              class="alert alert-danger">
            Name is required
          </div>
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
      </form>
    </div>
</div>

Vad är fel i koden ovan?

Svar #1

Ditt problem är här:

[(ngModel)]="username" name="name"
      #username="ngModel">

När du gör detta skapar du en variabel username för din mall, som refererar till NgModel-instansen. Så när du binder ngModel till username tror kompilatorn att du binder till referensen, inte till din komponents username-egenskap, eftersom mallvariabler döljer komponentegenskaper med samma namn. Ändra namnet på referensen till usernameModel eller något liknande (och kom ihåg att ändra det överallt där du använder det, även i div som visar fel) så bör det fungera bra.

Relaterade artiklar