在我的Angular-13项目中，我试图在@tusharghoshbd/ngx数据表中实现高级搜索
我有这个代码：
接口：
export interface Merchant {
id?: number;
merchant_name?: string;
account_number?: string;
merchant_status?: number;
created_date?: string;
}
服务：
import { Merchant} from 'src/app/models/merchants.model';
getAllMerchants(): Observable<Merchant[]> {
return this.http.get<Merchant[]>(this.baseUrl + 'merchants');
}
组件.ts:
import { MerchantService } from 'src/app/services/merchant.service';
import { Merchant} from 'src/app/models/merchants.model';
export class MerchantsComponent implements OnInit {
@ViewChild('idTpl', { static: true }) idTpl!: TemplateRef<any>;
allMerchantList: any[] = [];
data = [];
dataBK = this.allMerchantList;
options = {};
columns: any = {};
constructor(
private merchantService: MerchantService,
) { }
ngOnInit(): void {
this.loadDatatable();
this.loadAllMerchants();
}
loadDatatable(){
this.columns = [
{
key: 'id',
title: '<div class="blue"><i class="fa fa-id-card-o"></i> SN.</div>',
width: 60,
sorting: true,
cellTemplate: this.idTpl,
},
{
key: 'merchant_name',
title: '<div class="blue"><i class="fa fa-user"></i> Merchant</div>',
width: 100,
sorting: true,
},
{
key: 'account_number',
title: '<div class="blue"><i class="fa fa-envelope"></i> Account No.</div>',
width: 100,
sorting: true
}
];
}
loadAllMerchants(){
this.merchantService.getAllMerchants().subscribe({
next: (res: any) => {
this.allMerchantList = res.result;
this.dataBK = this.allMerchantList;
}
})
}
onMerchantNameSearch(value: any)
{
this.data = this.dataBK.filter(row => row.merchant_name.toLowerCase().indexOf(value) > -1);
}
onAccountNumberSearch(value: any)
{
this.data = this.dataBK.filter(row => row.account_number.toLowerCase().indexOf(value) > -1);
}
}
component.html：
<div class="col-sm-4 col-xs-6 col-6 ">
<div class="form-group">
<label for="merchant_Name">Merchant Name:</label>
<input type="text" autocomplete="off" class="form-control" (input)="onMerchantNameSearch($event.target.value)" id="merchant_Name" placeholder="Merchant Name"/>
</div>
</div>
<div class="col-sm-4 col-xs-6 col-6 ">
<div class="form-group">
<label for="account_number">Account No.</label>
<input type="text" autocomplete="off" class="form-control" (input)="onMerchantNameSearch($event.target.value)" id="account_number" placeholder="Account Number"/>
</div>
</div>
<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="allMerchantList" [columns]="columns" [options]="options">
<ngx-caption>
</div>
</ngx-caption>
<ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
</ng-template>
<ng-template #idTpl let-rowIndex="rowIndex" let-row="row">
{{rowIndex+1}}
</ng-template>
</ngx-datatable>
console.log(res(；
给出：
"result":[
{
"id": 1,
"merchant_name": "Appiah",
"account_number": "332222",
"merchant_status": 1,
"created_date": "2022-01-24T12:51:08.19",
},
{
"id": 2,
"merchant_name": "Kwesi",
"account_number": "554444",
"merchant_status": 1,
"created_date": "2022-01-25T16:43:41.873",
},
{
"id": 3,
"merchant_name": "fggffgfgfg",
"account_number": "455654",
"merchant_status": 1,
"created_date": "2022-01-25T16:46:20.77",
}
]
和
console.log(this.allMerchantList(；
给出：
[
{
"id": 1,
"merchant_name": "Appiah",
"account_number": "332222",
"merchant_status": 1,
"created_date": "2022-01-24T12:51:08.19",
},
{
"id": 2,
"merchant_name": "Kwesi",
"account_number": "554444",
"merchant_status": 1,
"created_date": "2022-01-25T16:43:41.873",
},
{
"id": 3,
"merchant_name": "fggffgfgfg",
"account_number": "455654",
"merchant_status": 1,
"created_date": "2022-01-25T16:46:20.77",
}
]
当我在Advance Search的输入字段中输入值时，我希望在@tusharghoshbd/ngx数据表中得到结果。
但在我这么做之前，我在组件中出现了这个错误：
错误TS2339:类型"never"上不存在属性"merchant_name"。
192 this.data=this.dataBK.filter(row=>row.merchant_name.toLowerCase((.indexOf(value(>-1( ；
如何解决此问题？
感谢
也许不要使用点表示法来获取匿名对象的属性。编译器可能认为这种情况是错误的。
onMerchantNameSearch(value: any)
{
this.data = this.dataBK.filter(row =>
row['merchant_name'].toLowerCase().indexOf(value) > -1);
}
onAccountNumberSearch(value: any)
{
this.data = this.dataBK.filter(row =>
row['account_number'].toLowerCase().indexOf(value) > -1);
}
如果你不想遇到这样的错误(这似乎是TypeScript转换的一个小问题(，那么你可以禁用"；strictNullChecks"；在您的angular.json文件中。然后键入"；从不"；不会存在。
您的MerchantService可能不正确。HttpClient.get直接返回正文，除非您正在添加options参数并设置"；观察"-propery。因此，尝试更改订阅如下：
this.merchantService.getAllMerchants().subscribe((res: any) => {
this.allMerchantList = res;
this.dataBK = this.allMerchantList;
})
还可以看看我的例子：https://stackblitz.com/edit/angular-rrdq9z?file=src/app/app.component.ts
因为您正在将实例分配给null。您应该通过首先定义属性来初始化它。在row上，您试图访问merchant_name，但它可能永远不存在或没有任何内容。
快速而简单的解决方案可以是定义dataBK的内容。dataBK: any[] = [];如果我们不在乎它有什么，或者数据类型可能会改变，我们可以使用任何数据类型。
正确的方法是创建一个接口。什么是dataBK？行的数组。好吧，什么样的划船？我们将merchant_name, account_number...包含在行对象中。那么我们总是知道，dataBK将保存一个数组或Row对象。我们已经定义了，Row对象将具有这样的属性来访问。留在?中，因为我不能100%确定它们会在那里被访问，也许你会这样做——以防你可以去掉问号。
dataBK: Row[] = [];
interface Row {
id?: number;
merchant_name?: string;
account_number?: string;
merchant_status?: number;
created_date?: string;
}