无法读取未定义的Angular / TypeScript属性'forEach'

肯·安东尼

早上好，我遇到了这个问题，只是不知道如何解决。这是现有代码，当前正在创建当前用户的管理员视图。我们有一个表组件用来绑定用户数据。但是，我得到此无法读取表组件TS文件中的未定义错误的属性'forEach'。

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>

穆斯塔法·昆瓦

管理员界面

export class AdminUiComponent implements OnInit {
      public users: any[] = [];
      resetUsers: any;
      @Input() header: string;  
      columns = [ // Remove @Input and use `=` instead of `:`
        { userName: "User Name" },
        { firstName: "First Name" },
        { lastName: "Last Name" },
        { email: "Email" },
        { roleId: "Role ID" },
        { statusId: "Status ID" },    
      ];
...
}

表组件：

....
ngOnInit(): void {
  if(Array.isArray(this.columns))
    this.columns.forEach((col) => {
      let pair = Object.entries(col);
      this.columnKeyValuePairs.push(pair[0]);
      this.displayedColumns.push(pair[0][0]);
    });
  }
....

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。