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

此过滤器将仅保留每个服务器的第一个实例。