ngx-datatable内部flex angular

Question

在我的应用程序中，我使用flexbox概念在窗口上显示一个ngx-datatable（公司列表）和一个Form（公司详细信息）。首先，一个ngx-datatble将出现在窗口中。它将延伸至50％（具有两个列名称和父公司），而单击按钮后将显示表单（公司详细信息）。使用我的代码，我可以将ngx-datatable拉伸到窗口的50％。 ngx-datatable和form都在窗口上均匀取向。但问题是ngx数据表中的列没有使用数据表进行操作。当单击以打开右侧的表单时，一列消失（不显示父公司）。我是Anguar的新手。我试过很多方面。但是无法通过拉伸弹性框来动态设置列。

我的代码是

CSS

.flex-row {
  display: flex;

}
.company-list {
  margin-left: 18px;
  margin-right: 18px;
  margin-top: 10px;
  width: 50%;
}
.company-detail {
  margin-left: 18px;
  margin-right: 18px;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ngx-datatable{

}

HTML CODE

<div fxLayout="row" fxLayoutAlign="start stretch">
<div class="flex-row" fxFlex="100%">
    <div class="company-list" fxFlex style="margin-top:10px;">
                <ngx-datatable *ngIf="companies && companies.length" class="material" [scrollbarH]="true" [rows]="companies" [externalPaging]="true" [externalSorting]="true" [count]="companyPage.totalElements" [offset]="companyPage.number" [limit]="companyPage.size"
                        [columnMode]="'force'" [footerHeight]="'auto'" [headerHeight]="'auto'" [rowHeight]="'auto'" (page)='onCompanyPageEvent($event)' (sort)='onCompanySortEvent($event)' (activate)="onActivateCompany($event)">
                        <ngx-datatable-column [prop]="'name'" >
                            <ng-template ngx-datatable-header-template >{{'A921Name' | translate}}</ng-template>
                        </ngx-datatable-column>
                        <ngx-datatable-column [prop]="'parentName'" [sortable]="true">
                                <ng-template ngx-datatable-header-template>
                                        <span class="ellipsis" title="{{value}}">
                                                {{'A922ParentCompany' | translate}}
                                        </span>
                                </ng-template>
                        </ngx-datatable-column>
                </ngx-datatable>
                <!-- create company button -->
                <div fxLayout="row" fxLayoutAlign="start end" style="margin-top:30px;margin-left:10px;">
                        <button mat-fab (click)="onCreateNewCompany()" color="primary" aria-label="add">
                                <mat-icon>add</mat-icon>
                        </button>
                </div>
        </div>

        <div class="company-detail" *ngIf="selectedCompany" fxFlex="50%"  style="margin-top:10px; ">
                <form action="#" #companyForm="ngForm">
                        <mat-card class="demo-card demo-basic" *ngIf="selectedCompany">
                                <mat-card-title>
                                        <span *ngIf="selectedCompany.id" style="">{{ 'A925SubCompany' | translate }} {{ 'A924Edit' | translate }}   </span>
                                        <span *ngIf="!selectedCompany.id">{{ 'A925SubCompany' | translate }} {{ 'A923Create' | translate }}</span>
                                </mat-card-title>
                                <mat-card-content fxLayout="column">
                                        <mat-form-field>
                                                <mat-select id="companySelector" placeholder="{{ 'A922ParentCompany' | translate }}" [(ngModel)]="selectedCompany.parentId" name="parentId">
                                                        <mat-option *ngFor="let company of parentCompanies" [value]="company.id">{{ company.name }}
                                                        </mat-option>
                                                </mat-select>
                                        </mat-form-field>
                                        <mat-form-field>
                                                <input matInput type="text" [(ngModel)]="selectedCompany.name" name="name" placeholder="{{ 'A904CompanyName' | translate }}">
                                        </mat-form-field>
                                </mat-card-content>

                                <mat-card-actions>
                                        <button mat-raised-button color="warn" (click)="onDeleteCompany(selectedCompany)" class="btn btn-default" [disabled]="!selectedCompany.id">{{ 'A933Delete' | translate }}</button>

                                        <button mat-raised-button color="" (click)="onResetCompanyForm()" class="btn btn-default" [disabled]="!companyForm.form.valid">{{ 'A934Cancel' | translate }}</button>

                                        <button mat-raised-button color="primary" (click)="onSubmitCompanyForm()" class="btn btn-default" [disabled]="companyForm.form.pristine">{{ 'A935Save' | translate }}</button>
                                </mat-card-actions>
                        </mat-card>
                </form>
        </div>
    </div>