NativeScript-ui-autocomplete 未定义属性
2020-03-31
547
这可能是一个愚蠢的问题,但我试图获取远程数据以在 nativescript-ui-autocomplete 中使用,但出现以下错误
ERROR TypeError: 无法设置未定义的属性“loadSuggestionsAsync”
该代码与 https://github.com/NativeScript/nativescript-ui-samples-angular/tree/master/autocomplete/app/examples/remote-data-fetch 中的示例非常相似,但我无法使其工作。
TypeScript
import * as http from "tns-core-modules/http";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel } from "nativescript-ui-autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-ui-autocomplete/angular";
export class MapComponent implements OnInit {
private _items: ObservableArray<TokenModel>;
private jsonUrl = "https://raw.githubusercontent.com/NativeScript/nativescript-ui-samples/master/examples-data/airports.json";
mapbox: MapboxViewApi;
constructor( private router: Router) {
// Use the component constructor to inject providers.
}
ngOnInit() {
let that = this;
this.autocomplete.autoCompleteTextView.loadSuggestionsAsync = function (text) {
const promise = new Promise(function (resolve, reject) {
http.getJSON(that.jsonUrl).then(function (r: any) {
const airportsCollection = r.airports;
const items: Array<TokenModel> = new Array();
for (let i = 0; i < airportsCollection.length; i++) {
items.push(new TokenModel(airportsCollection[i].FIELD2, null));
}
resolve(items);
}).catch((err) => {
const message = 'Error fetching remote data from ' + that.jsonUrl + ': ' + err.message;
console.log(message);
alert(message);
reject();
});
});
return promise;
};
}
@ViewChild("autocomplete", { static: true }) autocomplete: RadAutoCompleteTextViewComponent;
get dataItems(): ObservableArray<TokenModel> {
return this._items;
}
}
XML
<RadAutoCompleteTextView #autocomplete [items]="dataItems" suggestMode="Suggest" displayMode="Plain">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
我也在一个空白项目上尝试过,但同样错误
编辑: 尝试在操场上重现,它工作正常,我将代码复制到我的项目中并得到相同的错误,尝试将所有内容放入 try/catch 中并在错误后得到此错误
ERROR Error: Uncaught (in promise): Error: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.res.Resources$Theme android.content.Context.getTheme()' on a null object reference
JS: createAlertDialog(file: node_modules\@nativescript\core\ui\dialogs\dialogs.android.js:12:0)
JS: at (file: node_modules\@nativescript\core\ui\dialogs\dialogs.android.js:96:0)
JS: at ZoneAwarePromise(file: node_modules\@nativescript\angular\zone-js\dist\zone-nativescript.js:902:0)
JS: at alert(file: node_modules\@nativescript\core\ui\dialogs\dialogs.android.js:93:0)
JS: at push../app/map/map.component.ts.MapComponent.ngAfterViewInit(file: src\app\map\map.component.ts:61:12)
JS: at callProviderLifecycles(file: node_modules\@angular\core\fesm5\core.js:21414:0)
JS: at callElementProvidersLifecycles(file: node_modules\@angular\core\fesm5\core.js:21388:0)
JS: at callLifecycleHooksChildrenFirst(file:///data/data/org.nativescript.MapboxEnduco/files/app...
3个回答
尝试 ngAfterViewInit()。ngAfterViewInit() 在视图首次呈现后调用。这就是 @ViewChild() 依赖它的原因。
ngAfterViewInit() {
let that = this;
this.autocomplete.autoCompleteTextView.loadSuggestionsAsync = function (text) {
const promise = new Promise(function (resolve, reject) {
http.getJSON(that.jsonUrl).then(function (r: any) {
const airportsCollection = r.airports;
const items: Array<TokenModel> = new Array();
for (let i = 0; i < airportsCollection.length; i++) {
items.push(new TokenModel(airportsCollection[i].FIELD2, null));
}
resolve(items);
}).catch((err) => {
const message = 'Error fetching remote data from ' + that.jsonUrl + ': ' + err.message;
console.log(message);
alert(message);
reject();
});
});
return promise;
};
}
Md. Nahiduzzaman Rose
2020-03-31
遇到了同样的问题,就我而言,我必须将
this.autocomplete.*autoCompleteTextView*.loadSuggestionsAsync = function (text) {
替换为
this.autocomplete.**nativeElement**.loadSuggestionsAsync = function (text) { //etc
希望它能对您有所帮助。
Alin Algiu
2020-06-02
就我而言。我将组件声明移至上一个模块。这很有帮助。也许它需要一些特殊模块,但我在文档中没有找到任何信息。
Vitaliy Javurek
2020-07-11