使用材料數據表 (Angular 7) 的兩個 NG-Container 元素未顯示選定行復選框

Question

我有一個使用 Angular Material 構建的動態數據表，我正在使用 API 為表提供當前的數據。

我想使用添加復選框列來選擇特定行和/或多行，但我在顯示復選框行以進行選擇時遇到問題。

現在我的復選框行根本沒有出現。 第一個 ng-container 列未顯示

我不確定是什么問題？

我將 Angular 7 與 Angular Material 一起使用

視圖.component.html

 <table mat-table [dataSource]="fetchedData" matSort matSortActive="{{defaultSortCol}}" matSortDirection="asc">

    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef style="width:40px;">
        <mat-checkbox (change)="$event ? masterToggle() : null"
          [checked]="selection.hasValue() && isAllSelected()"
          [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
          [checked]="selection.isSelected(row)">
        </mat-checkbox>
      </td>
    </ng-container>

    <ng-container [matColumnDef]="column.columnId" *ngFor="let column of viewData.ColumnObjects">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        {{ column.propertyName }}
      </th>
      <td mat-cell *matCellDef="let action">{{ action[column.columnId] }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="viewData.ColumnIds; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: viewData.ColumnIds"></tr>
  </table>

view.component.ts

    @Component({
        templateUrl: 'viewpage.component.html'
    })
    export class ViewpageComponent implements AfterViewInit, OnInit, OnDestroy {

        viewData: any;
        viewName: string;
        viewTag: number;
        fetchedData: any;
        dataSource: ViewData

Source;
    pageSizeOptions: number[] = [10, 20, 50];

    defaultSortCol = "1";

    @ViewChild(MatSort) sort: MatSort;
    @ViewChild(MatPaginator) paginator: MatPaginator;

    selection = new SelectionModel<TableRow>(true, []);


    navSub: any;

    constructor(private actionService: ActionService, private route: ActivatedRoute, private router: Router) { }

    ngOnInit() {
        // Init the component the first time it is navigated to.
        this.initData();
        // Subscribe to the router, so that any new navigation to this component loads new data.
        this.navSub = this.router.events.subscribe((e: any) => {
            if(e instanceof NavigationEnd){
                this.initData();
            }
        });
    }

    initData(){
        this.viewTag = +this.route.snapshot.paramMap.get("tag");
        this.dataSource = new ViewDataSource(this.actionService);

        // Load the View from the DataSource with default params
        this.dataSource.loadView(this.viewTag, 0, 10, this.defaultSortCol, "asc");

        // Subscribe to the View in the DataSource
        this.dataSource.view.subscribe(x => {
            if (x.ActionName) {
                this.viewName = x.ActionName;
                this.viewData = x;
                this.fetchedData = this.viewData.TableData;
                console.log(`View Data ` + JSON.stringify(this.viewData.ViewData.DbrAction));
                // this.viewData = ['select'].concat(this.viewData);
            }
        });
    }

    ngAfterViewInit() {
        // After sorting, jump back to first page of newly sorted data.
        this.sort.sortChange.subscribe(
            () => {
                this.paginator.pageIndex = 0
            });
        // Sort changes and pagination events should reload the page.
        merge(this.sort.sortChange, this.paginator.page)
            .pipe(
                tap(() => this.loadPage())
             ).subscribe();

    }

    loadPage() {
        this.dataSource.loadView(
            this.viewTag,
            //'',
            this.paginator.pageIndex,
            this.paginator.pageSize,
            this.sort.active,
            this.sort.direction);

    }

Answer 1

你的表嘗試的使用viewdata之前，它是初始設置，其實viewData不確定。

這就是viewData.ColumnObjects拋出TypeError 。

嘗試使用? 檢查例如viewData?.ColumnObjects或使用*ngIf="viewData"保護您的表格

...
 <ng-container [matColumnDef]="column.columnId" *ngFor="let column of viewData?.ColumnObjects">
...

Answer 2

您多次提到“一行”復選框，但看起來您正在嘗試添加一列復選框，考慮到您需要選擇表格中的項目，這是有道理的。

viewData.ColumnIds 中有“選擇”嗎？ 如果沒有，那是你的問題。 材料表不會渲染您提供的每個 matColumnDef，它只會渲染在 'columns' 數組中具有匹配名稱的 matColumnDef。