Angular 9 - 获取可观察对象数组内部的值

Question

我有一个 servers 对象数组，在该数组中我有另一个可观察的对象数组，它的键是 [securityGroups] .

我有另一个 securitygroupsArray 数组，我在其中获取 API 以获取所有 securityGroups.

我需要在我的服务器数组的 securityGroups 键中查找该服务器上所有安全组的名称，并在选项中仅显示我的其他数组的 ngfor 的名称 (securityGroupArray) 不同。我尝试使用 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: "", …}

Answer 1

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

Angular 9 - 获取可观察对象数组内部的值

Angular 9 - Get value Inside Observable Array of objects

javascript

rxjs

angular

angular5