Angular Материал - таблица mat-table не отображает данные из rest api - PullRequest
Новая
       60

Angular Материал - таблица mat-table не отображает данные из rest api

0 голосов
/ 29 мая 2020

Я пытался реализовать mat-table в angular 8. Я не понимаю, что делаю неправильно, данные, которые предоставляет моя конечная точка REST, четко видны на выходе консоли.

мой админ. Компонент. html файл 

    <table mat-table [dataSource]="dataSource">
        <!-- <ng-container *ngFor="let value of values;let i=index;">
            <tr *ngFor ="let row of {{value.rows}};let i = index;">
                <th mat-header-cell *matHeaderCellDef>{{row.header}}</th>
                <td mat-cell>{{}}</td>
            </tr>
        </ng-container> -->

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

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

              <!-- Name Column -->
              <ng-container matColumnDef="BU">
                <th mat-header-cell *matHeaderCellDef> BU</th>
                <td mat-cell *matCellDef="let data"> {{data.BU}} </td>
              </ng-container>

              <!-- Weight Column -->
              <ng-container matColumnDef="DURATION">
                <th mat-header-cell *matHeaderCellDef> DURATION </th>
                <td mat-cell *matCellDef="let data"> {{data.duration}} </td>
              </ng-container>

              <!-- Symbol Column -->
              <ng-container matColumnDef="PURPOSE">
                <th mat-header-cell *matHeaderCellDef> PURPOSE</th>
                <td mat-cell *matCellDef="let data"> {{data.remarks}} </td>
              </ng-container>
              <ng-container matColumnDef="apr">
                    <th mat-header-cell *matHeaderCellDef>
                         <mat-checkbox (change)="$event ? masterToggle() : null"
                                        [checked]="selection.hasValue() && isAllSelected()"
                                        [indeterminate]="selection.hasValue() && !isAllSelected()"
                                        [aria-label]="checkboxLabel()">
                                APPROVE</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)">Approve</mat-checkbox>
                    </td>
                  </ng-container>

                  <ng-container matColumnDef="rej">
                        <th mat-header-cell *matHeaderCellDef> REJECT</th>
                        <td mat-cell *matCellDef="let row" >
                                <mat-checkbox >Reject</mat-checkbox>
                        </td>
                      </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              <!-- <tr mat-footer-row *matFooterRowDef><button mat-button> Submit</button></tr> -->
            </table>
            <button mat-button color="primary" (click)="OnApprovalSubmit()">Submit</button>

мой ts файл 

export interface UserData{
  position:number;
  username:any;
  BU:any;
  duration:any;
  remarks:string;

}

@Component({
  selector: 'app-admin',
  templateUrl: 'admin.component.html',
  styleUrls: ['./app.component.css']
})

export class AdminComponent implements OnInit{
  displayedColumns: string[] = ['position','USERNAME', 'BU', 'DURATION', 'PURPOSE','apr','rej'];
  USER_DATA:any;

  // approve:any;
  // reject:any;

  constructor(public testService : TestService){}
  ngOnInit(){
    this.testService.getUserAccessDetails().subscribe(data =>{
      console.log(data);
      this.USER_DATA=data.USER_DATA;
      console.log(this.USER_DATA);

    })

  }


  dataSource = new MatTableDataSource<UserData>(this.USER_DATA);
  // console.log(this.USER_DATA);
  selection = new SelectionModel<UserData>(true, []);

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    console.log(this.USER_DATA);
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

  /** The label for the checkbox on the passed row */
  checkboxLabel(row?: UserData): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
  }

}

когда данные консоли поступают в этом формате 

USER_DATA: Array(1)
0: {position: "01", username: "NAme", BU: "Team", Duration: 3, remarks: "NA"}

, но строки все еще не отображаются, и ошибки тоже нет. Любая помощь по этому поводу будет оценена.

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Вы даже можете попробовать это, если не хотите создавать экземпляр MatTableDataSource внутри функции subscrb ie. 

export class AdminComponent implements OnInit{

  displayedColumns: string[] = ['position', 'USERNAME', 'BU', 'DURATION','PURPOSE','apr','rej'];
  dataSource = new MatTableDataSource<UserData>();

  ngOnInit() {
    this.testService.getUserAccessDetails()
    .subscribe(data => {
         this.dataSource.data = data.USER_DATA;
    });
  }
}
1 голос
/ 29 мая 2020

Вам необходимо предоставить результат, полученный как 'dataSource' внутри подписки, поскольку это dataSource, предоставленный в качестве входных данных в mat-table. 

ngOnInit() {
    this.testService.getUserAccessDetails()
    .subscribe(data => {
         this.USER_DATA=data.USER_DATA;
         this.dataSource = new MatTableDataSource<UserData>(this.USER_DATA);
    });
}
...