“元素”类型上不存在属性“元素” ANGULAR答案

【问题标题】：Property 'element' does not exist on type 'Element' ANGULAR“元素”类型上不存在属性“元素” ANGULAR
【发布时间】：2021-04-27 21:03:43
【问题描述】：

我找不到错误的解决方案。在 ng 服务中它工作得很好，一旦我去做 ng build --prod 有一个错误让我烦恼： “元素”类型上不存在属性“元素”。

编辑-depart.html

  <form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)" novalidate>
      <input  type="hidden" name="id" [(ngModel)]="data.element.id" />
    <h2 mat-dialog-title>Modifier Courrier Depart</h2>
    <mat-dialog-content class="mat-typography">
      <mat-card>
        <mat-card-header fxLayoutAlign="center">                
          <mat-card-subtitle><h2>Information</h2></mat-card-subtitle>
      </mat-card-header>
      <table cellspacing="2" class="w-100">
        <tr>
            <td>
                <mat-form-field class="w-100" appearance="outline" >
                  <mat-select placeholder="Type Contrat" name="type" [(ngModel)]="data.element.type">
                    <mat-option *ngFor="let contrat of contrats" [value]="contrat.value" >
                       {{contrat.viewValue}}
                    </mat-option>
                </mat-select>
                </mat-form-field>
            </td>
            <td>
              <mat-form-field class="w-100" appearance="outline">
                <input matInput placeholder="Destinataire" name="destinataire" [(ngModel)]="data.element.destinataire">
             
              </mat-form-field>
            </td>
        </tr>
    </table>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
        <button mat-raised-button color="primary" type="submit" [disabled]="!employeeForm.valid" [mat-dialog-close]>Update</button>
    </mat-dialog-actions>
    </form>

departs.component.ts

editDepart(element: Element) {
   // this.selectedEmployee = element;
   
    let dialogRef = this.dialog.open(EditDepart,  { disableClose: true,data: { element } }); 
    
    dialogRef.afterClosed().subscribe(result => {
      this.refreshEmployeeList();
    })    
    
   }

export interface Element {
  id: any;
  type: any;
  destinataire: any;
}

编辑离开

  export class EditDepart {

     constructor( private _employeeService: EmployeeService,

public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: Element) {

     }
    
    @Output() submit: EventEmitter<any> = new EventEmitter();
    
     onSubmit(form: NgForm) {
      if (form.value.id == null) {
        this._employeeService.postEmployee(form.value).subscribe((res) => {
          
          this._employeeService.getEmployeeList().subscribe((res) => {
           
              this.submit.next(res as Employee[]);
           
          });
        //  M.toast({ html: "Saved successfully.", classes: "rounded" });
        });
      }
      else {
    
        this._employeeService.putEmployee(form.value).subscribe((res) => {
          
          this._employeeService.getEmployeeList().subscribe((res) => {
              this.submit.next(res as Employee[]);
              //this.employees = employees;
           
          });
          
        });
      }
    }
      
     
    }

【问题讨论】：

似乎它假设数据的类型为元素。尝试设置数据属性的类型，如果可能的话，您可以粘贴您的edit-department.ts文件，这有助于更好地理解问题吗？

标签： angular typescript

【解决方案1】：

在您已声明的编辑离开组件中

public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: Element) {

当实际数据的类型为 {element: Element} 时，这期望数据的类型为 Element

你可以改成

@Inject(MAT_DIALOG_DATA) public data: any

或更改分配给数据的值，例如

let dialogRef = this.dialog.open(EditDepart,  { disableClose: true,data: { ...element } });

【讨论】：