如何使用primeng根据角度中其他下拉菜单的选择来显示下拉项目？

Question

我想显示距离该位置最近的商店。因此，我给出了 2 个下拉菜单，一个用于位置（州），另一个用于显示最近的商店（租户）。只有 6 个地点和 2 家商店。

在.ts文件中， 首先我得到所有活跃的商店（租户）

    getAllTenants() { this._tenantService.getTenantsForPublic(undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,999,undefined).subscribe((data) => {
  this.tenants = data.items.filter((item) => item.isActive);
})

}

然后我得到所有位置（州）

  getAllStates() {
this._stateProxy.getAll().subscribe((result) => {
  this.governorates = result.items;
  console.log('states', this.governorates);
});

}

在我的 .html 文件中

//第一个下拉菜单

 <p-dropdown #governorateDropdown [showClear]="true" [filter]="true" filterBy="name" placeholder="Governorate" [ngModel]="selectedStateId" (onChange)="updateStore($event)" formControlName="governorate" [options]="governorates" optionLabel="name" optionValue="id"></p-dropdown>

//第二个下拉列表

<p-dropdown [options]="tenants" [filter]="true" filterBy="name" name="tenants" [(ngModel)]="selectedTenantId" placeholder="Select Your Nearest Area" optionLabel="name" optionValue="id" [showClear]="true"></p-dropdown>

现在我不知道如何根据位置（州ID）选择来过滤商店值（租户ID），这应该在以下函数中

updateStore(event : any) {
if (this.selectedStateId == 12) {
  this.tenants.filter((value) => value.id == event.value)
}

}

Answer 1

您应该为租户重新分配价值，而不仅仅是过滤：

updateStore(event : any) {
if (this.selectedStateId == 12) {
  this.tenants = this.tenants.filter((value) => value.id == event.value)
  }
}

但无论如何，使用这种方法，您将覆盖现有数组，因此最好在单独的对象中拥有该数组的副本：

getAllTenants() { this._tenantService.getTenantsForPublic(undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,999,undefined).subscribe((data) => {
  this.tenants = data.items.filter((item) => item.isActive);
  this.tenantsDB = [...this.tenants];
})

然后这样过滤

updateStore(event : any) {
if (this.selectedStateId == 12) {
  this.tenants = this.tenantsDB.filter((value) => value.id == event.value)
  }
}

第二个下拉选项将是租户DB：

<p-dropdown [options]="tenantsDB" [filter]="true" filterBy="name" name="tenants" [(ngModel)]="selectedTenantId" placeholder="Select Your Nearest Area" optionLabel="name" optionValue="id" [showClear]="true"></p-dropdown>

查看工作stackblitz