Question

运行命令ng serve可以正常工作，因为ng serve --prod显示错误

ERROR in src\app\employee\employee.component.html(12,9): : Property 'emp' does not exist on type 'employee[]'.
src\app\employee\employee.component.html(23,9): : Property 'emp' does not exist on type 'employee[]'.
src\app\employee\employee.component.html(36,9): : Property 'emp' does not exist on type 'employee[]'.

Employee.component.html

    <h2 mat-dialog-title>Edit details</h2>
<div mat-dialog-content>
  <form
    fxLayout="column"
    [formGroup]="editForm"
    #f="ngForm">
  <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Id</mat-label>
        <input readonly 
        value="{{data.emp.id}}"
          matInput #id disabled
          formControlName="id"
          required/>
      </mat-form-field>
    </div>
    <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Name</mat-label>
        <input 
        value="{{data.emp.name}}"
          matInput #name
          placeholder="Email"
          formControlName="name"
          required/>
      </mat-form-field>
    </div>

    <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Designation</mat-label>
        <input
        value="{{data.emp.designation}}"
          matInput #designation
          placeholder="designation"
          formControlName="designation"
          required/>
      </mat-form-field>
    </div>

    <br />
    <div class="">
      <button
        mat-raised-button
        type="reset"
        class="btn btn-danger width"
        (click)="close()">   Close</button>&nbsp;&nbsp;
      <button
        mat-raised-button
        [disabled]="!f.valid"
        (click)="update(id.value,name.value,designation.value)"
        right
        class="btn btn-success width right"
        type="submit">
        Update
      </button>
    </div>
  </form>
  <br />

</div>

Empoyee.component.ts

import { Component, OnInit, Inject } from "@angular/core";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { HomeService } from "../home/home.service";


export interface employee{
  designation: string;
  id:number;
  name:string;
}
@Component({
  selector: "app-employee",
  templateUrl: "./employee.component.html",
  styleUrls: ["./employee.component.css"]
})
export class EmployeeComponent implements OnInit {
  editForm: FormGroup;

  constructor(
    public dialogRef: MatDialogRef<EmployeeComponent>,
    @Inject(MAT_DIALOG_DATA) public data: employee[],
    private service: HomeService
  ) {}

  ngOnInit() {
    this.editForm = new FormGroup({
      id: new FormControl({ disabled: true }, Validators.required),
      name: new FormControl("", [
        Validators.required,
        Validators.pattern(
          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
        )
      ]),
      designation: new FormControl("", [
        Validators.required,
        Validators.pattern(
          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
        )
      ])
    });
    console.log(this.data);
  }

  update(id, name, designation) {
    console.log(this.editForm.value);
    this.service.updateEmployee(id, name, designation).subscribe(
      data => {
        this.dialogRef.close();
        console.log(data);
        console.log("done");
      },
      err => {
        console.log(err);
      }
    );
  }
  close() {
    this.dialogRef.close();
  }
}

垫对话框数据来自

Home.component.ts

 onEdit(emp) {
    console.log("row clicked");
    console.log(emp);
    this.employee1 = emp;
    console.log("clicked");
    const dialogRef = this.dialog.open(EmployeeComponent, {
      width: "430px",
      data: { emp: this.employee1 }
    });

使用ng服务时一切正常，但使用cmd ng服务时一切正常 --prod显示错误。

我在employee.component.ts中尝试过 id：员工[]; 它不起作用

Answer 1

更改此行：

@Inject(MAT_DIALOG_DATA) public data: employee[],

到

@Inject(MAT_DIALOG_DATA) public data: any,

由于数据不是员工数组。在您的情况下，它是具有员工数组或员工对象的对象。明天您可以在此数据变量中传递更多对象。

类型'employee []不存在属性'emp'-Angular 6 ng serve --prod

1 个答案: