提问人:Help please 提问时间:10/6/2022 最后编辑:Help please 更新时间:10/6/2022 访问量:101
如何使用搜索实现 Angular 下拉列表
How to implement Angular Drop-down with Search
问:
如何进行搜索下拉列表。我不知道如何在我的下拉列表中实现搜索。希望有人能帮助我。如果我获得的数据是静态的,我可以通过搜索进行下拉列表。
在我的代码中,我在 drop 中提供的数据是动态供应商:SupplierDTO[];这个(供应商)是我创建的模型,我在其中获取我需要的字段。
.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');
}
})
}
答:
0赞
Fabian Strathaus
10/6/2022
#1
您的响应似乎不是数组,而是对象。因此,您应该映射以下内容:
getData(){
return this.http.get('https://localhost:44350/api/EamisDeliveryReceipt/list')
.pipe(
map(response => response.items.map(suppliers => suppliers.supplier.companyName)
)
)
}
提示:您可能应该为此 API 返回的类型定义一个接口。这样,对数据执行任何映射都会变得更加容易。
评论
0赞
Help please
10/6/2022
我想我在以下方面遇到了错误:response.items
0赞
Fabian Strathaus
10/6/2022
你能提供有关此错误的任何信息吗?
0赞
Help please
10/6/2022
属性“items”在类型“Object”上不存在。TS(2339)
0赞
Fabian Strathaus
10/6/2022
那么,也许您通过此 API 检索的 JSON 数据的屏幕截图不正确?在屏幕截图中,我可以肯定地看到此属性确实存在。
评论