Angular 财产'；名称'；不存在于类型'；用户'；获取此错误

执行此操作时，我希望我的表单显示在浏览器中，但不确定哪里出错。它显示的错误就像

    Error: src/app/addproducts/addproducts.component.html:18:48 - error TS2339: Property 'price' does not exist on type 'ADDPRODUCTSComponent'.
    
    18     <input type="text" id="price" [(ngModel)]="price" #client="ngModel" name="price" placeholder="Enter Price..">
                                                      ~~~~~
    
      src/app/addproducts/addproducts.component.ts:7:16
        7   templateUrl: './addproducts.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component ADDPRODUCTSComponent.
    
    
    Error: src/app/addproducts/addproducts.component.html:18:48 - error TS2339: Property 'price' does not exist on type 'ADDPRODUCTSComponent'.
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component ADDPRODUCTSComponent.

addproducts.component.html

使用CSS设计HTML表单的样式
{{message}}
名字
价格

addproducts.component.ts

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

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


user:User = new User("",0);
message:any;

  constructor(private serivce:ProductDetailsService ) { }

  ngOnInit(): void {
  }
 
public registerNow(){

  let res=this.serivce.doRegistration(this.user)

  res.subscribe((data)=>this.message=data)



}

}

app-routing.modules.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ADDPRODUCTSComponent } from './addproducts/addproducts.component';
import { OperationComponent } from './operation/operation.component';

const routes: Routes = [

  {path:"",redirectTo:"register",pathMatch:"full"},
  {path:"register",component:ADDPRODUCTSComponent},
  {path:"operation", component:OperationComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

产品详细信息.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductDetailsService {

  constructor(private http:HttpClient) { }

  public doRegistration(user){

    return this.http.post("http://localhost:8084/add",user,{responseType:'text' as 'json'})
  }
}

---

问题不在于你做错了什么，而在于你没有做什么。让我们按原样选择错误

类型“ADDPRODUCTSComponent”上不存在属性“price”

现在让我们看看

ADDPRODUCTSComponent

export class ADDPRODUCTSComponent implements OnInit {

  user:User = new User("",0);
  message:any;

  constructor(private serivce:ProductDetailsService ) { }

  ngOnInit(): void {
  }
 
  public registerNow(){
    let res=this.serivce.doRegistration(this.user)
    res.subscribe((data)=>this.message=data)
  }
}

组件类是否包含

price

？当您绑定到html中的属性时，必须在组件类中声明此属性

要解决此问题，只需将属性添加到组件中

export class ADDPRODUCTSComponent implements OnInit {
  price: any;  // <---Added
  
  user:User = new User("",0);
  message:any;

  constructor(private serivce:ProductDetailsService ) { }

  ngOnInit(): void {
  }
 
  public registerNow(){
    let res=this.serivce.doRegistration(this.user)
    res.subscribe((data)=>this.message=data)
  }
}

导出类ADDPRODUCTSComponent实现OnInit{
price:any；//this.message=data）
}
}

将用户中的变量设置为公共变量。默认情况下，ts将构造函数中的属性设置为私有，如果需要，需要将它们标记为公共。在构造函数中尝试

公共字符串，公共价格：number

。+欧文·开尔文（Owen Kelvin）在回答中写道：）正如我看到的那样，您在发布itTry add

？

模型字段之前对代码做了一些更改：

name？：string，price？：number

。并删除输入中的

name

属性。

export class ADDPRODUCTSComponent implements OnInit {
  price: any;  // <---Added
  
  user:User = new User("",0);
  message:any;

  constructor(private serivce:ProductDetailsService ) { }

  ngOnInit(): void {
  }
 
  public registerNow(){
    let res=this.serivce.doRegistration(this.user)
    res.subscribe((data)=>this.message=data)
  }
}