我的任务是按角React形式阵列添加prime ng下拉菜单，在行中添加下拉菜单时，不应填充之前选择的值，同时从行中删除任何下拉菜单，删除选项值应可用于其他唐斯，我尝试了随附代码，但没有成功

app.component.html
=======================

<form [formGroup]="form">
  <div>   
       <div
      formArrayName="credentials"
      *ngFor="let creds of addDynamicRow?.controls; let i = index"
    >
      <div [formGroupName]="i">
        <p-dropdown
          [options]="cities"
          placeholder="Select a City"
          optionLabel="name"
          optionValue="type"
          formControlName="filterSelection"
          (onChange)="selected($event,i)"
        ></p-dropdown>
      
      </div>
    </div>
  </div> 
  <br>
  <br>
  <button (click)="addCreds()">Add</button> &nbsp; &nbsp;
  <button (click)="deleteCreds()">Delete</button>

</form>

app.component.ts
================

import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

interface City {
  id: number;
  name: string;
  key: string;
  type: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  cities!: City[];
  form!: FormGroup;
  @ViewChildren('selectFilter') filterSelects!: QueryList<
    ElementRef<HTMLSelectElement>
  >;
  dynamicForm!: FormGroup;
  selectedLangs = new Set<string>();
  skillsForSelectedPath: any = [];

  ngOninit() {}
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      credentials: this.fb.array([this.filterItemRow()]),
    });

    this.cities = [
      {
        id: 20,
        name: 'abc',
        key: 'abc',
        type: 'abc',
      },
      {
        id: 11,
        name: 'def',
        key: 'def',
        type: 'def',
      },
      {
        id: 1,
        name: 'ghi',
        key: 'ghi',
        type: 'ghi',
      },
      {
        id: 2,
        name: 'jkl',
        key: 'jkl',
        type: 'jkl',
      },
      {
        id: 3,
        name: 'mno',
        key: 'mno',
        type: 'mno',
      },
      {
        id: 8,
        name: 'pqr',
        key: 'pqr',
        type: 'pqr',
      },
      {
        id: 9,
        name: 'stu',
        key: 'stu',
        type: 'stu',
      },
      {
        id: 10,
        name: 'vwx',
        key: 'vwx',
        type: 'vwx',
      },
      {
        id: 17,
        name: 'yza',
        key: 'yza',
        type: 'yza',
      },
      {
        id: 14,
        name: 'Days Down',
        key: 'daysDown',
        type: 'daysdown',
      },
     
      
    ];
  }
  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.filterItemRow());
  }
  filterItemRow() {
    return this.fb.group({
      filterSelection: ['', Validators.required],
    });
  }
  get addDynamicRow(): FormArray {
    return this.form.get('credentials') as FormArray;
  }
  getSkillFormGroup(index: number): FormGroup {
    const formGroup = this.form.controls[index] as FormGroup;
    return formGroup;
  }
  selected(event: any, i: number) {

   // this.cities = this.cities.filter((x) => x.type != event.value);
  }

  deleteCreds(){
    
  }
}

请提出执行建议。