Свойство 'emp' не существует для типа 'employee [] - Angular 6 ng serve --prod - PullRequest
Новая
       32

Свойство 'emp' не существует для типа 'employee [] - Angular 6 ng serve --prod

0 голосов
/ 19 декабря 2018

Выполнение команды 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();
  }
}

Данные Mat Matog поступают из

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 serve, но при использовании cmd ng serve --prodошибка его показа.

Я попробовал это в employee.component.ts id: employee [];не работает

1 Ответ

0 голосов
/ 19 декабря 2018

Измените эту строку: 

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

на 

@Inject(MAT_DIALOG_DATA) public data: any,

Поскольку данные не являются массивом сотрудников.это объект, который имеет массив сотрудников или объект сотрудника в вашем случае.Завтра вы можете передать больше объектов в эту переменную данных.

...