当列数组在 Angular 中更新时，Syncfusion 动态列显示空白

Question

我在我的应用程序中实现了同步融合网格，我使用动态列数组来渲染列。在列内部，我有一些属性，当列数组更新时，这些属性会显示和隐藏列，自定义列模板不显示任何数据 如果该列位于循环内。如果该列位于循环之外，它会显示数据并且工作正常。其他列在没有模板的情况下也可以正常工作

[![在此处输入图像描述][1]][1]

       
        <ejs-grid cssClass="contactsClassGrid" class="contactsClassGrid" *ngIf="!isLoading && columnsLoaded" #grid
            [dataSource]='dataAdaptor' [allowSorting]='true' [allowPaging]="true" [allowResizing]="true"
            [allowReordering]='true' [pageSettings]='pageSettings' (actionBegin)="onPageSettingsChanged($event)">
            <e-columns>
                <e-column headerText='Quick links' width='230' [visible]='true' [template]='editDeleteTemplate'
                    [allowResizing]="false" [allowReordering]='false'></e-column>
                <ng-container *ngFor="let column of columns">
                    <e-column
                        *ngIf="!column.iconColumn && column.elementAttribute !='links' && column.elementAttribute != 'leadAttorneys'"
                        [visible]='!column.hidden' [field]='column.elementAttribute' [headerText]='column.label'
                        [width]='column.columnWidth'>
                    </e-column>
                    <e-column
                    *ngIf="!column.iconColumn && column.elementAttribute !='links' && column.elementAttribute == 'leadAttorneys'"
                    [visible]='!column.hidden' [field]='column.elementAttribute' [headerText]='column.label'
                    [template]="attorneysTemplate"
                    [width]='column.columnWidth'>
                </e-column>
                </ng-container>
            </e-columns>
        </ejs-grid>
        <ng-template #attorneysTemplate let-data>
            {{ data?.matter }}
        </ng-template>
        <ng-template #editDeleteTemplate let-data>
            <div class="display-icon" style="display: flex; align-items: center; justify-content: left;">
                <app-quick-links [caseId]="data.id" [showDocumentDirectory]="showDocumentDirectory"
                    [disableTimeTracking]="disableTimeTracking"
                    [selectedIconOption]="selectedIconOption"></app-quick-links>
            </div>
        </ng-template>
    ```

Now here I am doing the updation in columns 
    this.tableSettingsService.tableSettings$.subscribe(data => {
            this.columns = this.tableSettingsService.showHideCustomColumnsForTable(this.columns, this.tableSettings.tableName, this.columns);
            });


  [1]: https://i.stack.imgur.com/vAZOl.png

Answer 1

 <ng-container *ngFor="let column of columns; trackBy:trackByFn">
this line
    trackByFn(index, item) {
        return item.id; // or a unique identifier in your object
    }

当我在循环后使用 trackBy 时它可以工作