[英]Angular 9 - Get value Inside Observable Array of objects
我有一组服务器object 在该数组中我有另一个可观察的对象数组,它的键是[securityGroups] 。
我有另一个securitygroupsArray数组,我在其中获取 API 以获取所有securityGroups 。
我需要在 securityGroups 键中查看我的服务器数组,以获取该服务器上安全组的所有名称,并在选项中仅显示我的其他数组(securityGroupArray)的不同名称的 ngfor。 我尝试使用 3 ngFor,但没有成功。 你能帮助我吗?
我的组件代码:
ngOnInit(): void {
forkJoin(
this.serverService.getServer(),
this.securityGroupService.getSecurityGroups())
.pipe(takeWhile(() => this.alive))
.subscribe(([servers, groups]) => {
this.servers = servers.map((item) => ({
...item,
securityGroups: this.serverService.getServerById(item.id)
.pipe(map(server => server["security_groups"]))
}))
this.securityGroupArray = groups['security_groups'].map((item) => ({
...item,
expanded: false,
}))
}
我的 html 代码:
<div class="form-group" [formGroup]="form">
<div class="col-sm-12">
<select
class="form-control border-primary"
formControlName="server"
>
<option [value]="''">select</option>
<span *ngFor="let group of securityGroupArray">
<option *ngFor="let server of servers" [value]="server.id">
<span *ngFor="let secGroup of server.securityGroups | async">
{{ secGroup.name !== group.name ? server.name : ''}}
</span>
</option>
</span>
</select>
</div>
</div>
我的服务器阵列:
{id: "1879f47f-1c5e-464b-bb76-e7cc13ef426e", name: "hello", flavor: {…}, securityGroups: Observable}
,
{id: "b9c7e32a-bf99-4250-83cb-13523f9c1604", name: "test01", flavor: {…}, securityGroups: Observable}
我的安全组数组
{id: "b339774a-9ff7-4136-a0ca-94dd998b8dcc", name: "hello", description: "", …}
,
{id: "e96d271c-aa69-4a61-b0ca-63bfa8c1293e", name: "new09", description: "", …}
<span>
不是<select>
的有效子代,请改用<ng-container>
:
<div class="form-group" [formGroup]="form">
<div class="col-sm-12">
<select
class="form-control border-primary"
formControlName="server"
>
<option [value]="''">select</option>
<ng-container *ngFor="let group of securityGroupArray">
<option *ngFor="let server of servers" [value]="server.id">
<span *ngFor="let secGroup of server.securityGroups | async">
{{ secGroup.name !== group.name ? server.name : ''}}
</span>
</option>
</ng-container>
</select>
</div>
</div>
<ng-container>
是一个“虚拟”DOM 元素; 它不会被渲染到实际的 DOM。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.