Question

我是Angular的新手，我目前正在开发一个小项目。我遵循了有关双向绑定的教程，现在尝试在我的项目中做到这一点。我有一个组件，但是当我尝试在html中设置值时，它不起作用。由于我对此很陌生，这肯定是一个愚蠢的错误，但我不知道这是什么。

当我使用一种方式绑定时，它可以工作（仅与[]一起使用），但是当我在html标记中添加（）时，它将不再起作用。

这是我自定义组件中的html代码：

<form class="form_MyProfil">
  <table class="myprofil_width" cellspacing="0">
    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="ngName" name="username" placeholder="Username"  disabled>
        </mat-form-field>
      </td>
    </tr>
    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="ngPassword" name="password" placeholder="New password" [type]="hide ? 'password' : 'text'">
          <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
        </mat-form-field>
      </td>
    </tr>

    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="ngMail" name="email" placeholder="Your Email" required>
        </mat-form-field>
      </td>
    </tr>
    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="ngTown" name="town" placeholder="Town"  type="text" required>
        </mat-form-field>
      </td>
    </tr>
   </table>
  </form>

这是我来自同一组件的ts代码：

 @Component({
 selector: 'app-my-profil',
 templateUrl: './my-profil.component.html',
 styleUrls: ['./my-profil.component.css']
 } )
 export class MyProfilComponent implements AfterViewInit, OnInit {
 ngOnInit(): void {
 this.loadProfil();
 }
 username:string;
 password:string;
 email:string;
 town:string;


 private userProfil: UserRegister;
 constructor(private route: ActivatedRoute,
  private router: Router,
 private authenticationService: AuthenticationService,
 private repo: RepositoryService,
 private alertService: AlertService) { }




//Load the profil of the user and assign the values to the form
 loadProfil(): void {
 this.repo.getData('api/Profil')
   .subscribe((res: UserRegister) => {
     this.userProfil = res;
     this.username = this.userProfil.userName;
     this.town = this.userProfil.town;
     this.fiability = this.userProfil.fiability;
     this.email = this.userProfil.email;
     this.nbEvents = 'Went to :' + 
     this.userProfil.nbEventsParticipated.toString() + '/' + 
     this.userProfil.nbEventRegistered.toString() + ' Events';
   },
     error => {
       this.alertService.error(error);
     });
   }

loadProfil方法进行了一个API调用，可以正确发送数据，但是当我尝试设置值时，它不起作用。

如果有人可以看到原因，那么非常感谢。

祝你有美好的一天，

Lio

Answer 1

您应该使用ts文件中存在的模型名称来填充名称和ngModel：

<form class="form_MyProfil">
  <table class="myprofil_width" cellspacing="0">
    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="username" name="username" placeholder="Username"  disabled>
        </mat-form-field>
      </td>
    </tr>
    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="password" name="password" placeholder="New password" [type]="hide ? 'password' : 'text'">
          <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
        </mat-form-field>
      </td>
    </tr>

    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="email" name="email" placeholder="Your Email" required>
        </mat-form-field>
      </td>
    </tr>
    <tr>
      <td>
        <mat-form-field class="myprofil_width">
          <input matInput [(ngModel)]="town" name="town" placeholder="Town"  type="text" required>
        </mat-form-field>
      </td>
    </tr>
   </table>
  </form>

组件中的双向绑定不起作用

1 个答案: