如何将两个 属性 值连接到 Angular 7 个数据 table 的单个数据 table 列中？ （例如：名字和姓氏在一列中）

Question

我想连接一个人的名字和姓氏，并使用 Angular 7 数据 table 在我的 table 的列中将其显示为姓名。这里名字和姓氏是两个不同的属性。

  <data-table [items]="userItems"
                        [itemCount]="userItemCount"
                        [pageLimits]="limits"
                        [limit]="5"
                        (reload)="reloadItems($event)"
                        (rowClick)="onRowClick($event)"
                        (rowDoubleClick)="rowDoubleClick($event)"
                        [rowTooltip]="rowTooltip">
              <data-table-column [property]="'UserId'"
                                 [header]="'UserId'"
                                 [visible]="false">
              </data-table-column>
              <data-table-column [property]="'FirstName'"
                                 [header]="'Name'"
                                 [sortable]="true">
              </data-table-column>

Answer 1

我们可以使用ng-template，来实现上面的需求

          <data-table-column [property]="'FirstName'"
                                 [header]="'Name'"
                                 [sortable]="true">
                <ng-template #dataTableCell let-item="item">
                  {{item.FirstName}} <span *ngIf="item.MiddleName != ''"> 
                  {{item.MiddleName}} </span><span>{{item.LastName}}</span>
                </ng-template>
           </data-table-column>