我收到錯誤 undefined reading : name in angular 。 如何從 mat-dailog 讀取數據並將其添加到表中？

Question

我有點困惑為什么我會出錯？

html.文件

<h2>Network provider <mat-icon (click)="openDialog(mytemplate)">add_circle_outline</mat-icon></h2>

<ng-template #mytemplate>
  <div class="container">
    <div class="box">
      <h1 mat-dialog-title><b>New Network Provider</b></h1>
      <form [formGroup]="form">
        <mat-form-field appearance="outline">
          <input matInput [(ngModel)]="name"  placeholder="enter the network provider" />
        </mat-form-field>
      </form>
      <button mat-stroked-button mat-dialog-close color="accent">CANCEL</button>
      <button mat-flat-button color="accent" (click)="onclick()">Submit</button>
    </div>
  </div>
</ng-template>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>Id</th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <!-- Weight Column -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

文件

    dataSource: any;
          NetworkProvider = [];
          dialogRef: MatDialogRef<unknown>;
          providers: provider;
        
         getnetwork() {
            this.service.getAllNetworkProviders().subscribe(res => {
              this.NetworkProvider = res.data;
              this.dataSource = this.NetworkProvider;
            });
          }
         openDialog(template): void {
    // ask user to confirm, if he rea lly wants to proceed
    this.dialogRef = this.dialog.open(template);
    this.dialogRef.afterClosed().subscribe((data:any) => {
      if (data) {
        const network = {
  name: data
        };

        this.service.networkProviderStatus(network).subscribe(data => {
          this.getnetwork();
          this.snackBar.open('Successfully created new network provider  sim', 'Close', { duration: 2000 });
        });
      } else {
      }
    });
  }
onclick() {
this.dialogRef.close(this.name);
}

模型.ts

  export interface providers {
    data: provider[];
  }

  export interface provider {
    id: number;
    name: string;
    insertUTC: string;
    updateUTC: string;
  }

服務.ts

getAllNetworkProviders(): Observable<providers> {
    return this.http.get<providers>(`${this.baseUrl}/networkProvider`);
  }

networkProviderStatus(name): Observable<networkactivation> {
    return this.http.post<networkactivation>(`${this.baseUrl}/networkProvider`, name);
  }

我正在嘗試單擊墊子圖標，在那個墊子對話框中，我需要寫一些文本並單擊提交。 它應該添加到表格中。

但我收到錯誤“無法讀取未定義的屬性（讀取'名稱'）”

請幫助我理解。 我被困在哪里？

Answer 1

解決方法是通過在對話框的mat輸入字段中添加[(ngModel)]="name"，將對話框內容綁定到ts文件中聲明的變量名。

<input matInput [(ngModel)]="name" placeholder="enter the network provider" />
openDialog(template): void {
    // ask user to confirm, if he rea lly wants to proceed
    this.dialogRef = this.dialog.open(template);
    this.dialogRef.afterClosed().subscribe((data:any) => {
      if (data) {
        const network = {
  name: data
        };

        this.service.networkProviderStatus(network).subscribe(data => {
          this.getnetwork();
          this.snackBar.open('Successfully created new network provider  sim', 'Close', { duration: 2000 });
        });
      } else {
      }
    });
  }
onclick() {
this.dialogRef.close(this.name);

}