Question

我正在尝试使用方法实现下拉菜单，但返回空值。如果我尝试将ngOninit放入其中，则会丢失快照路由器值，并且无法返回200结果。我把它放在构造函数中，它返回值，但是我又丢失了我的值。

我得到了这样的结果（工作正常）：

 [{"hypervisorName":"Steve","hypervisorId":1},{"hypervisorName":"Docker","hypervisorId":2}, 
   {"hypervisorName":"kubernetes","hypervisorId":3}]

我的后端方法：

 [HttpGet("hyperforvm")]
 public IActionResult GetHypervisorsForVm()
 {
        var model = from hyper in _context.Hypervisors
                   select new 
        { HypervisorName = hyper.Name, HypervisorId = hyper.HypervisorId };
          return Ok(model);
 }

我的组件

export class AddVmComponent implements OnInit {
  model: any = {};
  disabledProperty: boolean = true;
  items: any;

  constructor(private alertify: AlertifyService, private vm: VmService, private route: 
   ActivatedRoute, private http: HttpClient) {
    this.items = this.getHyper()
  }

  ngOnInit() {
    let projectId = +this.route.snapshot.paramMap.get('projectId')
    this.model.projectId = projectId
    this.model.managementId = 1    
  }

  getHyper() {
    this.vm.getHypervisorsForVm().subscribe(h => this.model = h)
  }  
}

我的HTML看起来像：

    <div class="input-group mt-1">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <i class="fas fa-dot-circle text-info"></i>&nbsp;Hypervisor
        </div>
      </div>
     <select class="form-control" >
       <option disabled>-Please choose hypervisor-</option>
       <option *ngFor="let item of items" [value]="item.hypervisorId">
        {{ item.hypervisorName }}
       </option>
     </select>
    </div>

情况是我需要将hypervisorId保存到db并在下拉列表中显示hypervisorName（可以通过邮递员evrything进行后端测试，可以）。问题没关系，我将其放在构造函数或ngOninit中会丢失快照值。在构造函数的getHyper（）方法内部返回结果，而在ngOninit内部则不返回结果。但是两种情况下，值都不会显示在内部下拉列表中。如何显示hypervisorName保存hypervisorId，并且在它们旁边不会丢失快照值。

Answer 1

您应该努力删除any类型，这样做将极大地帮助您查找错误！。

话虽如此，您可以尝试以下操作：

export interface Hypervisor {
  hypervisorName: string;
  hypervisorId: number;
}

export interface Projectmanagement {
  projectId: number;
  managementId: number;
}

export class AddVmComponent implements OnInit {
  hypervisors$: Observable<Hypervisor>;
  disabledProperty: boolean = true;
  model: Projectmanagement;

  constructor(
    private alertify: AlertifyService,
    private vm: VmService,
    private route: ActivatedRoute,
    private http: HttpClient)
  {
    this.hypervisors$ = this.vm.getHypervisorsForVm();
  }

  ngOnInit() {
    this.model.projectId = +this.route.snapshot.paramMap.get('projectId');
    this.model.managementId = 1;
  }
}

<div class="input-group mt-1">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <i class="fas fa-dot-circle text-info"></i>&nbsp;Hypervisor
        </div>
      </div>
     <select class="form-control" >
       <option disabled>-Please choose hypervisor-</option>
       <option *ngFor="let item of hypervisors$ | async" [value]="item.hypervisorId">
        {{ item.hypervisorName }}
       </option>
     </select>
    </div>

Answer 2

更改了我的html，现在可以正常使用

   <div class="input-group mt-1">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <i class="fas fa-dot-circle text-info"></i>&nbsp;Hypervisor
        </div>
      </div>
     <select name="hypervisorId" [(ngModel)]="model.hypervisorId" class="form- 
              control" >
       <option disabled>-Please choose hypervisor-</option>
       <option *ngFor="let item of model.items" [ngValue]="item.hypervisorId">
        {{ item.hypervisorName }}
       </option>
     </select>
    </div>

如何从Angular ngFor

2 个答案: