基于Angular4.0以上版本的多语言系统国际化表格数据展示问题

这段时间在fix系统国际化的一些issues，因为是多语言系统包括几十种语言切换，遇到了一些问题，现在自己做个总结

表头国际化显示正常，但是切换为其他语言后，表格数据没有展示出来：分析问题原因是：表头字段切换国际化后字段名称发生改变(已翻译为其他语言)，所以映射不到已经定义的字段，所以解决方案是：映射已国际化的字段为之前定义的字段，匹配。

在Html 文件中添加映射的属性字段：
<div class="xxx_table_container">
        <xxx_table_componet [headers]="listPersonalInfoTableHeaders$ | async"
                                [headerColumnNameMap]="headerMap"
                                [tableData]="tableData$ | async">
        </xxx_table_componet>
    </div>

在对应的.ts 文件中定义headerMap
            headerMap: { [key: string]: string } = {};

添加初始化headerMap的方法：
private initxxxTableHeadersMap() {

        const columnName: string = this.commonService.getTranslatedString('NAMESPACE.NAME');
        const columnName: string = this.commonService.getTranslatedString('NAMESPACE.AGE');
        const columnName: string = this.commonService.getTranslatedString('NAMESPACE.GENDER');
        const columnName: string = this.commonService.getTranslatedString('NAMESPACE.CITY');
        const columnAddress: string = this.commonService.getTranslatedString('NAMESPACE.ADDRESS');

        this.headerMap[columnName] = 'Name'; // 注意这里的Name,Age,Gender,City,Address和国际化字符串中的翻译保持一致，相当于取到翻译后的语言后再和表头字段的值匹配一致
        this.headerMap[columnAddress] = 'Age';
        this.headerMap[columnTaxId] = 'Gender';
        this.headerMap[columnVendorId] = 'City';
        this.headerMap[columnANID] = 'Address';
    }

最后在ngOnInit()方法中调用
ngOnInit(): void {
        
        this.initListDedupSupplierTableHeadersMap();
    }