复杂对象的 Angular 8 下拉菜单

Question

In my project I am using .net Core 2.2 and Angular 8 for UI. I want to implement dropdown for complex objects according their id. When I go to dropdown I want to show for ex: ProjectName according to their Id.

My VirtualMachine class looks like:

    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; }
    }

My Controller POST action looks like:

    [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();
    }

Postman POST body:

{
    "name":"Abstergo",
    "ipAddress":"192.168.0.1",
    "diskSize":25,
    "cpu":16,
    "ram":100,
    "imageUrl":"www.google.com",
    "role":1,
    "status":0,
    "hypervisorId":1,
    "projectId":11,
    "managementId":8
}

Angular typecript class:

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 code

<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> 

Answer 1

If you want to show ProjectName according to their Id , then you can sort this array before showing:

 let hypervisor = [ { projectName: "Abstergo 18", projectId: 18 }, { projectName: "Abstergo 17", projectId: 17 }, { projectName: "Abstergo 16", projectId: 16 }, ]; hypervisor.sort((a, b) => a.projectId - b.projectId); console.log(hypervisor);

So you can sort in ngOnInit() method:

hypervisor = [
    { projectName: "Abstergo 18", projectId: 18 },
    { projectName: "Abstergo 17", projectId: 17 },
    { projectName: "Abstergo 16", projectId: 16 },
];

ngOnInit() {
  this.hypervisor.sort((a, b) => a.projectId - b.projectId);    
}

HTML:

<div> 
   <select name="select"> 
       <option style="display:none">empty</option> 
       <option *ngFor="let data of hypervisor" 
           [ngValue]="data.projectId"> 
           {{data.projectName}} 
       </option> 
   </select> 
</div> 

It can be seen in a stackblitz example .