如何在搜索中实现Angular 下拉

cgh8pdjw  于 2022-10-24  发布在  Angular
关注(0)|答案(1)|浏览(148)

如何使用搜索进行下拉列表。我不知道如何在我的下拉列表中实现搜索。希望有人能帮我。如果我得到的数据是静态的,我可以使用搜索进行下拉操作。
在我的代码中,我在Drop中提供的数据是Dynamic Supplier:SupplierDTO[];这个(Supplier)是我创建的模型,我在其中获取我需要的字段。
html

<mat-form-field class="box" appearance="fill">
<mat-label>Supplier</mat-label>

<mat-select formControlName="supplierId" (selectionChange)="selectedSupplier($event)">
<mat-option *ngFor="let items of supplier" [value]="items.id">
{{items.companyName}}
</mat-option>

</mat-select>
</mat-form-field>

.ts

export class DeliveryReceiptComponent implements OnInit {

supplier: SupplierDTO[];
}

ngOnInit(): void {
this.selectedSupplier;
}

selectedSupplier(trigger: MatSelectChange)
  {
      this.selectedSupplierID = trigger.value;
      this.supplierSvc.getSupplierDR(this.selectedSupplierID).subscribe((response: any) => {

          var splitted = response.split(":", 4)
          this.deliveryReceiptForm.get('Bank').patchValue(splitted[0]);
          this.deliveryReceiptForm.get('AccountName').patchValue(splitted[1]);
          this.deliveryReceiptForm.get('AccountNumber').patchValue(splitted[2]);
          this.deliveryReceiptForm.get('Branch').patchValue(splitted[3]);
          if(this.deliveryReceiptForm.get('AccountName').value === this.dbmRequired ){
            this.APRDisplayed = true;
            this.deliveryReceiptForm.get('purchaseRequestNumber').addValidators(Validators.required);
            this.deliveryReceiptForm.get('purchaseRequestDate').addValidators(Validators.required);             
            this.deliveryReceiptForm.get('drNumFrSupplier').addValidators(Validators.required);
            this.deliveryReceiptForm.get('drDate').addValidators(Validators.required);
            this.deliveryReceiptForm.get('aprNum').addValidators(Validators.required);
            this.deliveryReceiptForm.get('aprDate').addValidators(Validators.required);
            this.deliveryReceiptForm.get('purchaseOrderDate').setValue('0001-01-01');
            this.deliveryReceiptForm.get('saleInvoiceDate').setValue('0001-01-01');
            this.deliveryReceiptForm.get('aprDate').reset();
          }
          else{
            this.APRDisplayed = false;
            this.deliveryReceiptForm.get('purchaseOrderNumber').addValidators(Validators.required);
            this.deliveryReceiptForm.get('purchaseOrderDate').addValidators(Validators.required); 
            this.deliveryReceiptForm.get('purchaseRequestNumber').addValidators(Validators.required);
            this.deliveryReceiptForm.get('purchaseRequestDate').addValidators(Validators.required);
            this.deliveryReceiptForm.get('saleInvoiceDate').addValidators(Validators.required);
            this.deliveryReceiptForm.get('saleInvoiceNumber').addValidators(Validators.required);
            this.deliveryReceiptForm.get('drNumFrSupplier').addValidators(Validators.required);
            this.deliveryReceiptForm.get('drDate').addValidators(Validators.required);
            this.deliveryReceiptForm.get('aprDate').setValue('0001-01-01');

          }
      })

  }
iq0todco

iq0todco1#

您的响应似乎不是一个数组,而是一个对象。因此,您应该Map以下内容:

getData(){
  return this.http.get('https://localhost:44350/api/EamisDeliveryReceipt/list')
    .pipe(
      map(response  => response.items.map(suppliers => suppliers.supplier.companyName)
    )
  )
}

提示:您可能应该为该API返回的类型定义一个接口。这样可以更容易地对数据执行任何Map。

相关问题