Не отображаются полученные параметры json в таблице

1. Реализовал компонент , где нужно ввести данные и отправить их на сервер. 2.Сервер в свою очередь, принимает данные, производит манипуляции и возвращает мне json на фронт.
2. Я создал еще один компонент Table где хочу принять этот json и отобразить в этой таблице.
3. Там где вводятся данные (компоненте) , я указал тег дочернего компонента table и использовал делегат @Input() в дочернем компоненте для того чтобы их связать.

В итоге проблема такая , если не использовать компонент table, а обработать параметры с сервера в первом компоненте , то они будут отображены просто текстом на странице ( то есть они приходят корректно) , а если использовать компонент с таблицей от angular material , то данные не отображаются в этой таблице и вообще нигде. Как сделать правильно , чтобы связывать компоненты и передавать/отображать данные где нужно ? В данном случае таблице.

Код:

Первый компонент, где нужно ввести данные и отправить на сервер:

   @Component({
      selector: 'app-info-order',
      templateUrl: './info-order.component.html',
      styleUrls: ['./info-order.component.scss']
    })
    export class InfoOrderComponent implements OnInit {
    
    
      dates: ObjRequest=new ObjRequest("", "");
    
        posts : any[] | undefined;
    
      constructor(public httpServiceInfo : HttpServiceService ) { }
    
      ngOnInit(): void {
      }
      @Output() xdates= new EventEmitter<string>();
    
    
      postData(dates: ObjRequest){
    
         this.httpServiceInfo.postData(dates).subscribe(
         posts => {this.posts = posts}
         );
      }
    
    }

Шаблон первого компонента:

<form class="example-form" (submit)="postData(dates)">

    <mat-form-field class="example-full-width" appearance="legacy">
        <mat-label>Token</mat-label>
        <input   matInput #first [(ngModel)]="dates.token" [ngModelOptions]="{ standalone: true }" />
    </mat-form-field>

      
    <mat-form-field class="example-full-width" appearance="fill">
        <mat-label>str</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..." [(ngModel)]="dates.str" [ngModelOptions]="{ standalone: true }" ></textarea>
</mat-form-field>
     
    
     <button mat-raised-button color="primary" (click)="postData(dates)" >Submit</button>

</form>

 <div *ngFor="let post of posts"  >  
    
 </div>  
 <component-name  [post]="post" ></component-name> 

Второй компонент таблица (дополнительно с чекбоксами) :

export interface Payinfo {
  position:number;
  number :  string;   
  amount: number;
  edDate: Date;
  pan: string;
  term: string;
  refNum: string;
  approval: string;
  eTime: Date; 
  depositedAmount: number
}

    @Component({
      selector: 'component-name',
      styleUrls: ['./component-name.component.scss'],
      templateUrl: './component-name.component.html',
    })
    export class TableSelectionExample implements OnInit {
    
    @Input() post : Payinfo[]=[] ;
    
    
     constructor(){}
      ngOnInit(): void {
       
      }
      getStringDate(date: Date) {
        return new Date(date).toLocaleDateString() + " " + new Date(date).toLocaleTimeString();
      }
      
    
      displayedColumns: string[] = ['select', 'orderNumber', 'amount', 'authDateTime', 'maskedPan','authRefNum','approvedCode','terminalId'];
      dataSource = new MatTableDataSource<Payinfo>(this.post);
      selection = new SelectionModel<Payinfo>(true, []);
    
    
      isAllSelected() {
        const numSelected = this.selection.selected.length;
        const numRows = this.dataSource.data.length;
        return numSelected === numRows;
      }
    
      masterToggle() {
        if (this.isAllSelected()) {
          this.selection.clear();
          return;
        }
    
        this.selection.select(..this.dataSource.data);
      }
    
      checkboxLabel(row?: Payinfo): string {
        if (!row) {
          return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
        }
        return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
      }
    }  

Шаблон второго компонента таблицы:

<table *ngFor="let post of posts" mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()"
                      [aria-label]="checkboxLabel()">
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)"
                      [aria-label]="checkboxLabel(row)">
        </mat-checkbox>
      </td>
    </ng-container>

    <ng-container matColumnDef="number">
      <th mat-header-cell *matHeaderCellDef> number </th>
      <td mat-cell *matCellDef="let post"> {{post.number}} </td>
    </ng-container>
  
    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> amount </th>
      <td mat-cell *matCellDef="let post"> {{post.amount}} </td>
    </ng-container>
     
    <ng-container matColumnDef="eTime">
      <th mat-header-cell *matHeaderCellDef> eTime </th>
      <td mat-cell *matCellDef="let post"> {{post.eTime}} </td>
    </ng-container>
   
    <ng-container matColumnDef="pan">
      <th mat-header-cell *matHeaderCellDef> pan </th>
      <td mat-cell *matCellDef="let post"> {{post.pan}} </td>
    </ng-container>

    <ng-container matColumnDef="refNum">
      <th mat-header-cell *matHeaderCellDef> refNum </th>
      <td mat-cell *matCellDef="let post"> {{post.refNum}} </td>
    </ng-container>

    <ng-container matColumnDef="approved">
      <th mat-header-cell *matHeaderCellDef> approved </th>
      <td mat-cell *matCellDef="let post"> {{post.approved}} </td>
    </ng-container>

    <ng-container matColumnDef="term">
      <th mat-header-cell *matHeaderCellDef> term </th>
      <td mat-cell *matCellDef="let post"> {{post.term}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"
        (click)="selection.toggle(row)">
    </tr>
  </table>

В консоле и network браузера все нормально, ошибок нету.