Question

您好，我正在尝试使用角度启动和弹簧启动来构建简单的Crud应用程序

我在编译代码时遇到一个错误。由于我是新手，所以我似乎无法解决它。错误消息如下：

ERROR in src/app/update-employee/update-employee.component.html:2:16 - error TS2339: Property 'submitted' does not exist on type 'UpdateEmployeeComponent'.

2 <div [hidden]="submitted" style="width: 400px;">
                 ~~~~~~~~~

  src/app/update-employee/update-employee.component.ts:8:16
    8   templateUrl: './update-employee.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UpdateEmployeeComponent.

这是我的update-employee.component.ts文件：

 import { Component, OnInit } from '@angular/core';
 import { Employee } from '../employee';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EmployeeService } from '../employee.service';

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

 id: number;
 employee: Employee;

  constructor(private route: ActivatedRoute,private router: Router,
  private employeeService: EmployeeService) { }

  ngOnInit() {
 this.employee = new Employee();

 this.id = this.route.snapshot.params['id'];

 this.employeeService.getEmployee(this.id)
  .subscribe(data => {
    console.log(data)
    this.employee = data;
  }, error => console.log(error));
 }

 updateEmployee() {
 this.employeeService.updateEmployee(this.id, this.employee)
  .subscribe(data => console.log(data), error => console.log(error));
 this.employee = new Employee();
 this.gotoList();
  }

 onSubmit() {
 this.updateEmployee();    
 }

   gotoList() {
 this.router.navigate(['/employees']);
  }
 }

这是我的update-employee.component.html文件：

  <h3>Update Employee</h3>
  <div [hidden]="submitted" style="width: 400px;">
  <form (ngSubmit)="onSubmit()">
  <div class="form-group">
  <label for="name">First Name</label>
  <input type="text" class="form-control" id="firstName" required [(ngModel)]=
  "employee.firstName" name="firstName">
  </div>

  <div class="form-group">
  <label for="name">Last Name</label>
  <input type="text" class="form-control" id="lastName" required [(ngModel)]="employee.lastName" 
  name="lastName">
  </div>

  <div class="form-group">
  <label for="name">First Name</label>
  <input type="text" class="form-control" id="emailId" required [(ngModel)]="employee.emailId" 
  name="emailId">
  </div>

  <button type="submit" class="btn btn-success">Submit</button>
  </form>
  </div>

Answer 1

错误是正确的，我在控制器中看不到submitted成员变量。以下

控制器

export class UpdateEmployeeComponent implements OnInit {
  submitted = false;

  onSubmit() {
    this.submitted = true;
    ...
  }
}

此外，导航应该在订阅中，以避免在更新列表之前跳转到新页面。

export class UpdateEmployeeComponent implements OnInit {
  id: number;
  employee: Employee;
  submitted = false;

  constructor(
    private route: ActivatedRoute, 
    private router: Router,
    private employeeService: EmployeeService) { }

  ngOnInit() {
    this.employee = new Employee();
    this.id = this.route.snapshot.params['id'];
    this.employeeService.getEmployee(this.id).subscribe(
      data => {
        console.log(data)
        this.employee = data;
      }, 
      error => console.log(error)
    );
  }

  updateEmployee() {
    this.employeeService.updateEmployee(this.id, this.employee).subscribe(
      data => {
        console.log(data)
        this.employee = new Employee();      // <-- I presume this is a placeholder
        this.gotoList();                     // <-- Navigate here
      }, 
      error => console.log(error)
    );
  }

  onSubmit() {
    this.submitted = true;
    this.updateEmployee();
  }

  gotoList() {
    this.router.navigate(['/employees']);
  }
}

Answer 2

声明一个在课程开始时提交的变量，并为它赋false，在Submit时将其更改为true。

Ts：

export class UpdateEmployeeComponent implements OnInit {
  submitted: boolean = false;
   onSubmit() {
 this.updateEmployee();    
 this.submitted = true
 }
}

类型“ UpdateEmployeeComponent”上不存在属性“已提交”

2 个答案: