javascript - 如何从Angular ngFor中的方法中提取值
问题描述
我正在尝试使用方法实现下拉,但它返回空。如果我尝试放入 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> 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 并在它们旁边不要丢失快照值。
解决方案
您应该努力删除 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> 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>
推荐阅读
- amazon-web-services - 如果用户与之交互的唯一 AWS 资源是 API Gateway,是否需要 AWS 联合身份?
- python - 使用 itertools.count() 计数时出错
- linux - 从 linux 命令行运行 Matlab 函数——语法错误?
- python - AttributeError:“张量”对象没有属性“_in_graph_mode”
- python - 如何用整行替换特定值Python
- python - 管理依赖 - 管道代码跨越多个文件
- android - 屏幕旋转时Listview不保存项目 - Android Studio
- javascript - 在 Edge 中,对超级方法调用 typeof 会返回“函数”,即使父类中不存在该方法
- java - JPA @repository @Query Can handle a null entity?
- javascript - 如何向 Odoo13 的 POS 订单添加数据