angular/typescript: vlastnosti ng-multiselect-dropdown viacnásobne v textField


Používam balík ng-multiselect-dropdown. Úspešne som načítal svoje dáta do rozbaľovacieho zoznamu, ale chcem byť schopný použiť viacero vlastností v textovom poli rozbaľovacieho zoznamu.

Ak urobím

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

Dostávam tento výsledok:


Chcem urobiť niečo takéto (nameFirst a nameLast v textovom poli:

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

Keď to urobím, dostanem toto:

Ako môžem skombinovať vlastnosti nameFirst a nameLast (s medzerou medzi nimi)? Potrebujem pridať ďalšiu vlastnosť do môjho objektu používateľa? Môžem to urobiť dynamicky, alebo musím upraviť môj model?

Odpoveď č. 1

Podarilo sa mi tento problém obísť pridaním vypočítanej vlastnosti NameFull do môjho UserForDetailedDto na backende, pričom som zohľadnil ďalšiu vlastnosť v mojom front-end modeli, a potom som ju použil pre hodnotu 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;
}

Nastavenia rozbaľovacej ponuky

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