复杂对象的 Angular 8 下拉菜单

Question

在我的项目中，我将 .net Core 2.2 和 Angular 8 用于 UI。 我想根据它们的 id 实现复杂对象的下拉列表。 当我转到下拉列表时，我想根据他们的 ID 显示前：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; }
    }

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

    [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 正文：

{
    "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 打字稿类：

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> 

Answer 1

如果你想根据他们的Id显示ProjectName，那么你可以在显示之前对这个数组进行排序：

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

所以你可以在ngOnInit()方法中排序：

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> 

可以在a stackblitz example看到。