Angular - 在 select 選項上重復值

Question

我有一個 select，其中呈現了用戶的服務器。 每台服務器都有幾個安全組。 我需要在 select 上向用戶顯示，只有沒有該安全組的服務器。 但是，在我的 select 中，它為每個不同的安全組重復服務器的名稱。

示例：我有服務器 test01，它有安全組：novo09、default、relow。

當我 select 安全組 hello01 時，我只想在 select 中顯示服務器 test01 一次，而不是 2 次，它顯示 2 次，因為我有 2 個組已經包含在 server = novo09 中，relow。

服務器有效載荷：

{id: "b9c7e32a-bf99-4250-83cb-13523f9c1604", name: "test01", flavor: {…}, securityGroups: [{name: 'relow'}, {name: 'Novo09'} ]}

我的組件代碼：

public selectedGroupName: string = '';
ngOnInit(): void {

    let counter = 0;
    forkJoin(
      this.serverService.getServer(),
      this.securityGroupService.getSecurityGroups())
      .pipe(takeWhile(() => this.alive),
      concatMap((data) => {
        this.servers = data[0].map((item) => ({
          ...item,
          securityGroups: this.serverService.getServerById(item.id)
            .pipe(map(server => server["security_groups"]))
        }))
        this.securityGroups = data[1].map((item) => ({
          ...item,
          expanded: false,
        }))
        return this.servers.map((server) => server.securityGroups);
      }), concatMap(items => items))
      .subscribe((data: any) => {
        this.servers[counter].securityGroups = data.filter(group => group.name !== 'default');
        counter++;
    })

    this.form = this.formBuilder.group({
      server: new FormControl('')
    })
  }
public openAttachModal(content, securitGroupName: string) {
    this.selectedGroupName = securitGroupName;
}

我的 Html 代碼：

      <ng-container *ngFor="let group of securityGroups">
 <div class="user-info__basic">
                <h5 class="mb-0">{{group.name}}</h5>
              </div>
 <button type="button" class="btn btn-primary" ngbTooltip="Attach Group" triggers="hover"
              (click)="openAttachModal(attachModal, group.name)"><i class="fas fa-plus"></i></button>
</ng-container>

 <ng-container *ngFor="let server of servers">
          <ng-container *ngFor="let secGroup of server.securityGroups">
            <ng-container *ngIf="secGroup.name !== selectedGroupName">
              <option [value]="server.id">
                {{server.name}}
              </option>
            </ng-container>
          </ng-container>
          <ng-container *ngIf="server.securityGroups.length == 0">
            <option [value]="server.id">
              {{server.name}}
            </option>
          </ng-container>
        </ng-container>

select https://imgur.com/7K2G7HF的圖像結果

Answer 1

當用戶選擇安全組時，您可以觸發一個事件來提取該安全組不存在的服務器列表。 就像是：

const servers = servers.filter(server => !server.securityGroups.find(secGroup => secGroup.id === selectedSecurityGroup.id));
// Where selectedSecurityGroup is the security group the user selected

您可以避免兩次添加服務器：

servers = servers.filter((server, index, self) => self.indexOf(server) === index);

此過濾器將僅保留每個服務器的第一個實例。