错误 TS2339:“用户”类型上不存在属性“用户名”

Angular
我正在尝试使用 [(ngModel)] 执行双向绑定,但它显示错误。我已经发布了所有相关文件,也尝试过使用所有相关查询,但错误仍然存​​在.. 任何人都可以帮忙。我也给出了我得到的错误


registers.component.html

<div>
    <h3 class = "text-center">{{message}}</h3>
</div>
<div class = "container">
    <div class = "row">
        <div class = "col-lg-12 col-sm-12 col-xs-12">
            <h4>Registration Form</h4>
            <form>
                <fieldset>
                    <div class = "form-group">
                        <label for = "username">Username</label>
                        <input type = "text" name = "username" [(ngModel)] = "user.username" class = "form-control" placeholder = "Enter your username" />
                    </div>
                    <div class = "form-group">
                        <label for = "firstname">FirstName</label>
                        <input type = "text" name = "firstname" [(ngModel)] = "user.firstname" class = "form-control" placeholder = "Enter your firstname" />
                    </div>
                    <div class = "form-group">
                        <label for = "lastname">Lastname</label>
                        <input type = "text" name = "lastname" [(ngModel)] = "user.lastname" id = "lastname" class = "form-control" placeholder = "Enter your lastname" />
                    </div>
                    <div class = "form-group">
                        <label for = "age">Age</label>
                        <input type = "text" name = "age" [(ngModel)] = "user.age" class = "form-control" placeholder = "Enter your age" />
                    </div>
                    <div class = "form-group">
                        <label for = "password">Password</label>
                        <input type = "text" name = "password" [(ngModel)] = "user.password" class = "form-control" placeholder = "Enter your password" />
                    </div>
                    <div class = "form-group">
                        <input class = "btn btn-success" type = "submit" name = "submit" value = "Register" (click) = "registerNow()" />
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SearchComponent } from './search/search.component';
import { AllUsersComponent } from './all-users/all-users.component';
import { RegistersComponent } from './registers/registers.component';
import { CodeComponent } from './code/code.component';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    SearchComponent,
    AllUsersComponent,
    RegistersComponent,
    CodeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

registers.component.ts

import { Component, OnInit } from '@angular/core';
import { UserServiceService } from '../user-service.service';
import { User } from '../user';

@Component({
  selector: 'app-registers',
  templateUrl: './registers.component.html',
  styleUrls: ['./registers.component.scss']
})
export class RegistersComponent implements OnInit {
  
  user : User = new User("","","",0,"");
  message : any;
  constructor(private service : UserServiceService) { }

  ngOnInit() {
  }

  public registerNow(){
    let response = this.service.doRegistration(this.user);
    response.subscribe(data => {
      this.message = data;
    });
  }

}

用户.ts

export class User{
    constructor(
        username : string,
        firstname : string,
        lastname : string,
        age : number,
        password : string
    ){}
}

***我得到的错误***

Build at: 2021-09-01T07:03:25.440Z - Hash: d61cbae04ddda1edb5f9 - Time: 552ms

Error: src/app/registers/registers.component.html:12:84 - error TS2339: Property 'username' does not exist on type 'User'.

12                         <input type = "text" name = "username" [(ngModel)] = "user.username" class = "form-control" placeholder = "Enter your username" />      
                                                                                      ~~~~~~~~

  src/app/registers/registers.component.ts:7:16
    7   templateUrl: './registers.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RegistersComponent.


Error: src/app/registers/registers.component.html:12:84 - error TS2339: Property 'username' does not exist on type 'User'.

12                         <input type = "text" name = "username" [(ngModel)] = "user.username" class = "form-control" placeholder = "Enter your username" />      
                                                                                      ~~~~~~~~

  src/app/registers/registers.component.ts:7:16
    7   templateUrl: './registers.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

回答

您需要像这样声明您的用户:

export class User{
public username : string,
public firstname : string,
public lastname : string,
public age : number,
public password : string
constructor(
username : string,
firstname : string,
lastname : string,
age : number,
password : string
){
this.username=username
this.firstname=firstname
this.lastname=lastname
this.age=age
this.password=password
}
}

您也可以使用缩写方式(请参阅构造函数中的“公共”)

export class User{
constructor(
public username : string,
public firstname : string,
public lastname : string,
public age : number,
public password : string
){}
}

以上是错误 TS2339:“用户”类型上不存在属性“用户名”的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>