javascript - 정의되지 않은 Angular/TypeScript의 'forEach'속성을 읽을 수 없습니다

좋은 아침 이 문제가 발생하여 해결 방법을 모르겠습니다. 이것은 기존 코드이며 현재 현재 사용자의 관리자보기를 만들고 있습니다. 사용자 데이터를 바인딩하는 데 사용하는 테이블 구성 요소가 있습니다. 그러나 나는 이것을 얻고있다정의되지 않은 오류의 'forEach'속성을 읽을 수 없습니다.테이블 구성 요소 TS 파일에서.

table.components.ts

export class TableComponent implements OnInit {
  @Input() header;
  @Input() columns: any[];
  @Input() data;
  constructor() {}
  columnKeyValuePairs = [];
  displayedColumns = [];
  tableData: MatTableDataSource<any>;
  @ViewChild(MatSort, { static: false }) sort: MatSort;
  expandedElement;
  ngAfterViewInit() {
    this.tableData.sort = this.sort;
  }
  ngOnInit(): void {
    this.columns.forEach((col) => {
      let pair = Object.entries(col);
      this.columnKeyValuePairs.push(pair[0]);
      this.displayedColumns.push(pair[0][0]);
    });
  }
  ngOnChanges(old) {
    if (old.data) {
      this.tableData = new MatTableDataSource<any>(old.data.currentValue);
    }
  }
}

위의 코드에서 이것은 내가 오류가 발생하는 줄입니다. this.columns.forEach((col) => {

Admin-ui.components.ts

export class AdminUiComponent implements OnInit {
  public users: any[] = [];
  resetUsers: any;
  @Input() header: string;  
  @Input() columns: [
    { userName: "User Name" },
    { firstName: "First Name" },
    { lastName: "Last Name" },
    { email: "Email" },
    { roleId: "Role ID" },
    { statusId: "Status ID" },
  ];
  @Input() data: any[];  
  constructor(    
    private userService: UserService,    
  ) { }  
 
  ngOnInit(): void {   
    this.userService;
    
    this.userService.getUsers().subscribe(data => {
      this.users = data.users;
      console.log(data.users); 
     
    });
  }
}

admin-ui.components.html

<div class="admin">
    <app-table [header]="header"
               [data]="users"
               [columns] = "columns"
    </app-table>
</div>