通过 ID 将 API 数据传递给 MatDialog

Question

我有一个 API 数据列表，但并未显示所有数据。我尝试通过 MatDialog 获取弹出窗口以显示更多详细信息，在这种情况下是“评论”。当然链接到正确的 ReferennceNo/ 列..有什么建议吗？

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>

错误： enter image description here

Answer 1

您将列表作为参数传递给对话框。但是 comment 不是列表的属性，因此是错误。您需要将元素作为参数传递。像这样：

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');
    });
  }

通过 ID 将 API 数据传递给 MatDialog

pass API data to a MatDialog by ID

api

angular

mat-dialog