Angular 材料 - 表垫表不呈现来自 rest api 的数据

Question

我一直在尝试在 angular 8 中实现 mat-table。我不明白我在做什么错，我的 REST 端点提供的数据在控制台 Z78E6221F6398D1356681DBCED96 上清晰可见

我的 admin.component.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"}

但仍然没有行被渲染，也没有错误。 对此的任何帮助将不胜感激。

Answer 1

您需要在订阅中提供作为“dataSource”获得的结果，因为它是作为 mat-table 的输入提供的 dataSource。

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

Answer 2

如果你不想在 subscrbie function 中实例化 MatTableDataSource，你甚至可以试试这个。

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