javascript - 如何让一个有孩子的父母只能在角度上为每个父母选择 1 个孩子

Question

这是代码： https ://stackblitz.com/edit/angular-6mcqxk-tikynx?file=src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-select-hide-selected',
  template: `
    <nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" [(ngModel)]="listOfSelectedValue">
      <nz-option
        *ngFor="let option of listOfOption"
        [nzLabel]="option"
        [nzValue]="option"
        [nzHide]="!isNotSelected(option)"
      ></nz-option>
    </nz-select>
  `,
  styles: [
    `
      nz-select {
        width: 100%;
      }
    `
  ]
})
export class NzDemoSelectHideSelectedComponent {
  listOfOption = ['Project 1', 'Project 2', 'Project 3', 'project 4'];
  listOfSelectedValue: string[] = [];

  isNotSelected(value: string): boolean {
    return this.listOfSelectedValue.indexOf(value) === -1;
  }
}

我在这里要做的是，当您选择“项目 1”时，会有另一列或子项选择它是哪个组，例如组 1 或组 2 或组 3，但它只能选择 1 组并选择该项目，它可以选择另一个与“项目 1”相同的项目，它有一个组，如果组 1 或组 2 或组 3，它选择它所属的位置。

输出应该是这样的：