angular / typescript：textField中的ng-multiselect-dropdown多重属性

Question

我正在使用ng-multiselect-dropdown软件包。我已成功将数据拉入下拉菜单，但我希望能够在下拉菜单的textField中使用多个属性。

如果我这样做

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFirst',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

我得到这个结果：

---

我想做这样的事情（nameFirst和nameLast在文本字段中：

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFirst' + ' ' + 'nameLast',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 3,
  allowSearchFilter: true
};

当我这样做时，我得到了：

如何合并nameFirst和nameLast属性（之间有一个空格）？我是否需要向用户对象添加另一个属性？我可以即时进行还是需要编辑模型？

Answer 1

通过在后端NameFull上添加一个UserForDetailedDto计算出的属性，并考虑了前端模型中的其他优势，然后将其用于text-field值。

Models \ UserForDetailedDto.cs

public class UserForDetailedDto
{
    public int Id { get; set; }

    public string Username { get; set; }

    public string NameFirst { get; set; }

    public string NameLast { get; set; }

    public string NameFull => NameFirst + " " + NameLast;

    ...
}

ClientApp \ src \ app_models \ User.ts

export interface User {
  id?: number;
  username?: string;
  nameFirst?: string;
  nameLast?: string;
  nameFull?: string;
}

下拉菜单设置

this.dropdownSettings = {
  singleSelection: false,
  idField: 'id',
  textField: 'nameFull',
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 5,
  allowSearchFilter: true
};