Javascript 复杂对象的角度8下拉列表

在我的项目中，我使用.NETCore2.2和Angular8作为UI。 我想根据复杂对象的id实现下拉列表。 当我进入下拉列表时，我想根据他们的Id显示ex:ProjectName

我的VirtualMachine类看起来像：

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

        public string Name { get; set; }    

        public string IpAddress { get; set; }    

        public int DiskSize { get; set; }    

        public short CPU { get; set; }    

        public int Ram { get; set; }    

        public string ImageUrl { get; set; }

        public VMRole Role { get; set; }
        public VMStatus Status { get; set; }

        public int HypervisorId { get; set; }
        public Hypervisor Hypervisor { get; set; }

        public int ProjectId { get; set; }
        public Project Project { get; set; }

        public int ManagementId { get; set; }
        public Management Management { get; set; }
    }

    [HttpPost("create")]
    public async Task<IActionResult> CreateVm(VirtualMachine vm)
    {
        if (await _repo.VmExists(vm.Name))
            return BadRequest("VM name already exists");

        vm.Hypervisor = _context.Hypervisors.SingleOrDefault(x => x.HypervisorId == 
        vm.HypervisorId);
        vm.Project = _context.Projects.SingleOrDefault(x => x.Id == vm.ProjectId);
        vm.Management = _context.Managements.SingleOrDefault(x => x.Id == vm.ManagementId);

        try
        {
            await _context.VirtualMachines.AddAsync(vm);
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateException)
        {
            return BadRequest();
        }

        return Ok();
    }

我的控制器POST操作如下所示：

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

        public string Name { get; set; }    

        public string IpAddress { get; set; }    

        public int DiskSize { get; set; }    

        public short CPU { get; set; }    

        public int Ram { get; set; }    

        public string ImageUrl { get; set; }

        public VMRole Role { get; set; }
        public VMStatus Status { get; set; }

        public int HypervisorId { get; set; }
        public Hypervisor Hypervisor { get; set; }

        public int ProjectId { get; set; }
        public Project Project { get; set; }

        public int ManagementId { get; set; }
        public Management Management { get; set; }
    }

    [HttpPost("create")]
    public async Task<IActionResult> CreateVm(VirtualMachine vm)
    {
        if (await _repo.VmExists(vm.Name))
            return BadRequest("VM name already exists");

        vm.Hypervisor = _context.Hypervisors.SingleOrDefault(x => x.HypervisorId == 
        vm.HypervisorId);
        vm.Project = _context.Projects.SingleOrDefault(x => x.Id == vm.ProjectId);
        vm.Management = _context.Managements.SingleOrDefault(x => x.Id == vm.ManagementId);

        try
        {
            await _context.VirtualMachines.AddAsync(vm);
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateException)
        {
            return BadRequest();
        }

        return Ok();
    }

角度类型脚本类：

export class VirtualMachine {
    name: string;
    ipAddress: string;
    diskSize: number;
    cpu: number;
    ram: number;
    imageUrl: string;
    role: string;
    status: string;
    projectId: number;
    hypervisorId: number;
    managementId: number;
    projectName: Project;
    managementName: Management;
    hypervisorName: Hypervisor;
}

html代码

<div> 
 <select name="select" [(ngModel)]="model.hypervisorId"> 
  <option style="display:none"></option> 
  <option *ngFor="let data of model.Hypervisor" [ngValue]="data.hyperisorId"> {{data.model.hypervisorName}} </option> 
 </select> 
</div> 

{{data.model.hypervisorName}

如果要根据其

Id

显示

ProjectName

，则可以在显示之前对该数组进行排序：

让虚拟机监控程序=[
{项目名称：“Absergo 18”，项目编号：18}，
{项目名称：“Absergo 17”，项目编号：17}，
{项目名称：“Absergo 16”，项目编号：16}，
];
排序（（a，b）=>a.projectId-b.projectId）；
日志（hypervisor）

请将您在angular{{data.model.hypervisorName}}中尝试过的代码发布到这里。要澄清一下，您希望由ID确定顺序吗？或者是否希望ID显示为选择列表中文本的一部分？如果要按ID对选择列表排序，请在检索数据后对其排序。例如：假设ID是数字的，您可以使用：items.sort（（a，b）=>{returna.ID-b.ID；}）；我想根据他们的id显示姓名。例如：projectName根据projectId。这是我从postgre获得的数据。这3个表与VirtualMachine有关系。情况是我使用解析器从db获取所有数据。我需要从数据库中获取数据，而不是hardcoding@ArzuSuleymanov因此，您可以连接结果数据并在之后对其进行排序concatenation@StepUp上面的示例非常适合我，但我还有另一个要求，希望在复杂对象数组中默认一个值（即hypervisor）。我们如何实现that@GouthamNithyananda我很高兴这对你有帮助！请看这个。作为一种良好的做法，最好提出新问题，以简化其他用户将来的搜索。@GouthamNithyananda stackoverflow.com/a/63192748/13596406选中此项可在下拉列表中获得默认选定值