错误 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
){}
}