>source

좋은 아침 이 문제가 발생하여 해결 방법을 모르겠습니다. 이것은 기존 코드이며 현재 현재 사용자의 관리자보기를 만들고 있습니다. 사용자 데이터를 바인딩하는 데 사용하는 테이블 구성 요소가 있습니다. 그러나 나는 이것을 얻고있다정의되지 않은 오류의 '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>


  • 답변 # 1

    관리 UI

    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]);
        });
      }
    ....
    
    

  • 답변 # 2

    Admin-ui.component.ts

    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" },
      ];
      ...
    
    

관련 자료

  • 이전 typescript - 다른 변수를 동적으로 호출하는 Angular가 가능합니까?
  • 다음 node.js - 몽구스에서이 쿼리 조건을 선택적으로 만드는 방법은 무엇입니까?