Angular 9 - Get value Inside Observable Array of objects

Question

I have an array of servers object where inside that array I have another observable array of objects, its key is [securityGroups] .

I have another array of securitygroupsArray , where I GET my API to fetch all securityGroups .

I need to look in my array of servers in the securityGroups key for all the names of the security group on that server, and show in an option only the names of the ngfor of my other array (securityGroupArray) that are different. I tried to use 3 ngFor, but it didn't work. Can you help me?

My Component code:

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,
        }))
      }

My html code:

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

My servers array:

{id: "1879f47f-1c5e-464b-bb76-e7cc13ef426e", name: "hello", flavor: {…}, securityGroups: Observable}
,

{id: "b9c7e32a-bf99-4250-83cb-13523f9c1604", name: "test01", flavor: {…}, securityGroups: Observable}

My securityGroupArray

{id: "b339774a-9ff7-4136-a0ca-94dd998b8dcc", name: "hello", description: "", …}
,

{id: "e96d271c-aa69-4a61-b0ca-63bfa8c1293e", name: "new09", description: "", …}

Answer 1

<span> is not valid child of <select> use <ng-container> instead:

<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> is a "virtual" DOM element; it will not be rendered to the actual DOM.