Angular 选中的行复选框未显示，带有两个使用材质数据表（角度7）的NG容器元素

我有一个使用Angular Material构建的动态数据表，其中我正在使用API为表提供当前的数据

我想使用“添加复选框列”来选择特定行和/或多行，但我在显示复选框行以进行选择时遇到问题

现在我的复选框行根本没有出现。第一个ng容器列未显示

我不确定是什么问题

我用的是角度7和角度材料

view.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>

{{column.propertyName}}
{{action[column.columnId]}

查看.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);

    }

@组件({
templateUrl:'viewpage.component.html'
})
导出类ViewpageComponent实现AfterViewInit、OnInit和OnDestroy{
viewData：任何；
viewName:字符串；
视图标签：编号；
获取数据：任何；
数据源：ViewData
来源；
页面大小选项：数字[]=[10,20,50]；
defaultSortCol=“1”；
@ViewChild（MatSort）排序：MatSort；
@ViewChild（MatPaginator）分页器：MatPaginator；
selection=新SelectionModel（true，[]）；
navSub：任何；
构造函数（私有actionService:actionService，私有路由：ActivatedRoute，私有路由器：router）{}
恩戈尼尼特（）{
//在组件第一次被导航到时初始化该组件。
这是initData（）；
//订阅路由器，以便此组件的任何新导航都会加载新数据。
this.navSub=this.router.events.subscribe（（e:any）=>{
if（导航结束的实例）{
这是initData（）；
}
});
}
initData（）{
this.viewTag=+this.route.snapshot.paramMap.get（“标记”）；
this.dataSource=新的ViewDataSource（this.actionService）；
//使用默认参数从数据源加载视图
this.dataSource.loadView（this.viewTag，0,10，this.defaultSortCol，“asc”）；
//订阅数据源中的视图
this.dataSource.view.subscribe（x=>{
if（x.ActionName）{
this.viewName=x.ActionName；
this.viewData=x；
this.fetchedData=this.viewData.TableData；
log（`View Data`+JSON.stringify（this.viewData.viewData.DbrAction））；
//this.viewData=['select'].concat（this.viewData）；
}
});
}
ngAfterViewInit（）{
//排序后，跳回新排序数据的第一页。
this.sort.sortChange.subscribe(
() => {
this.paginator.pageIndex=0
});
//排序更改和分页事件应重新加载页面。
合并（this.sort.sortChange，this.paginator.page）
.烟斗(
点击（（）=>this.loadPage（））
).subscribe（）；
}
加载页（）{
this.dataSource.loadView(
这个.viewTag，
//'',
this.paginator.pageIndex，
this.paginator.pageSize，
这个，排序，活动，
这个。排序。方向）；
}

您的表在初始设置之前尝试使用

viewdata

，实际上

viewdata

是未定义的

这就是为什么

viewData.ColumnObjects

抛出

TypeError

的原因

尝试使用

？

检查例如

viewData？.ColumnObjects

或使用

*ngIf=“viewData”

。。。
...

您的表在初始设置之前尝试使用

viewdata

，实际上

viewdata

是未定义的

这就是为什么

viewData.ColumnObjects

抛出

TypeError

的原因

尝试使用

？

检查例如

viewData？.ColumnObjects

或使用

*ngIf=“viewData”

。。。
...

您多次提到“行”复选框，但看起来您正在尝试添加一列复选框，考虑到您在表中选择项目的要求，这很有意义

---

viewData.ColumnId中是否有“select”选项？如果没有，这是您的问题。material表不会呈现您提供的每个matColumnDef，它只呈现在“columns”数组中具有匹配名称的matColumnDef。

您多次提到复选框的“行”，但看起来您正在尝试添加一列复选框，这将考虑到您在表格中选择项目的要求，这是有意义的

---

viewData.ColumnId中是否有“select”选项？如果没有，这是您的问题。material表不会呈现您提供的每个matColumnDef，它只呈现在“columns”数组中具有匹配名称的matColumnDef。

得到相同的错误。。而且我的复选框行也不会出现。请提供一个选项以重现您的错误.这是一个需要复制的相当大的应用程序..但是你明白我在问什么吗？我在帖子中澄清了我的问题你没有收到任何typeError？收到相同的错误..而且我的一行复选框也没有出现。请提供一个用于复制你的错误的。这是一个需要复制的相当大的应用程序..但是你明白吗我在问？我在上面的帖子中澄清了我的问题。你没有收到任何类型错误吗？正确，可能使用了错误的术语。每行相邻的垂直列复选框正确，可能使用了错误的术语。每行相邻的垂直列复选框

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