角度 - 阿尔戈利亚即时搜索：无法读取未定义的属性(读取"范围")

Question

我正在尝试连接基本的rangeConnector-从文档复制粘贴

https://www.algolia.com/doc/api-reference/widgets/range-input/angular/

但我得到了：无法读取未定义(读取"范围"(的属性

看起来状态是未定义的

代码：与文档完全相同

包装：

<ais-instantsearch [config]="config">
<app-range-input></app-range-input>
</ais-instantsearch>

import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';
import connectRange, { RangeWidgetDescription, RangeConnectorParams } from 'instantsearch.js/es/connectors/range/connectRange';
@Component({
selector: 'app-range-input',
template: `
<div *ngIf="state.range">
from
<input type="number" #min [value]="state.start[0]" min="state.range.min" max="state.range.max" />
to
<input type="number" #max [value]="state.start[1]" min="state.range.min" max="state.range.max" />
<button (click)="state.refine([1, 2])">Go</button>
</div>
`,
})
export class RangeInputComponent extends TypedBaseWidget<RangeWidgetDescription, RangeConnectorParams> {
public state: RangeWidgetDescription['renderState']; // Rendering options
constructor(
@Inject(forwardRef(() => NgAisIndex))
@Optional()
public parentIndex: NgAisIndex,
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchInstance: NgAisInstantSearch
) {
super('RangeInput');
}
ngOnInit() {
this.createWidget(connectRange, {
// instance options
//attribute: 'price',
});
super.ngOnInit();
}
}

Answer 1

看起来state对象还没有初始化，这就是您的问题所在。我在本地测试了这一点，在检查range属性之前检查state是否正确将使其能够正常工作。我还稍微修改了代码，将min/max转换为整数，然后将其发送到refine()，因为它也在那里抛出了一个错误。

<div *ngIf="state && state.range">
from
<input type="number" #min [value]="state.start[0]" min="state.range.min" max="state.range.max" />
to
<input type="number" #max [value]="state.start[1]" min="state.range.min" max="state.range.max" />
<button (click)="state.refine([this.toInt(min.value), this.toInt(max.value)])">Go</button>
</div>
...
toInt (val: any) {
return parseInt(val)
}

我将向文档提交一份更改请求，以包含此更改，因为它可能会产生误导。让我知道这对你来说是如何工作的！谢谢