通过 ID 将 API 数据传递给 MatDialog

Question

I have a list of API data but not all data is presented. I try to get popUp via MatDialog to present more details which in that situation is "Comment". of course linked to the correct ReferennceNo/ column..Any suggetions?

ParentComponent.ts:

  constructor(private service:NilexService , public dialog: MatDialog  )  { }

  TicketsList:any=[];

 ngOnInit(): void {
     
this.refreshTicList();
 }

refreshTicList(){
    this.service.getAllTicList().subscribe(data=>{
      this.TicketsList =data as string[];
      this.TicketsList = new MatTableDataSource(data);
      this.TicketsList.sort = this.sort;
    this.TicketsList.paginator = this.paginator;
    this.TicketsList.tooltrip = this.tooltrip;
      
    });
  }

openDialog(element: any): void {
    

    let dialogRef = this.dialog.open(ChildComponent, {
      width: '1720px',
      height: '500px',
      panelClass: 'my-centered-dialog',
      data :{ element : this.TicketsList
      }
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

ParentComponent.html:

 <ng-container class="example-button-container" matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> actions </th>
        <td  mat-cell *matCellDef="let element">
          <button mat-icon-button (click)="openDialog(element)" >
          <mat-icon  color= "primary" >open_in_new</mat-icon> 
        </button>
      </td>

ChildComponent.ts:

 constructor(
    public dialog_ref: MatDialogRef<ShowTicComponent>,
        @Inject( MAT_DIALOG_DATA ) public data: any) {
        
  }

  ngOnInit() {
 
  }

ChildComponent.html:

 <div>
 {{data.TicketsList.comment}}
 </div>

Error: enter image description here

Answer 1

You pass the list as an argument to the dialog. But comment is not a property of the list and hence the error. You need to pass the element as an argument. Like this:

openDialog(element: any): void {
    let dialogRef = this.dialog.open(ChildComponent, {
      width: '1720px',
      height: '500px',
      panelClass: 'my-centered-dialog',
      data: { element } // <== this is it
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }