Question

我正竭尽全力地使这项工作有效，但是除this tutorial之外，没有找到太多有关它的文档。

但是，它似乎是用TypeScript编写的（很奇怪），因此使用此代码会带来2个错误：

“类型”只能在.ts文件中使用。

代码如下：

import * as http from 'tns-core-modules/http';

export default {
  template: `
  <Page>
    <StackLayout>
      <Label text="Select airport"></Label>
      <RadAutoCompleteTextView ref="autocomplete"
                               displayMode="plain"
                               suggestMode="Suggest"
                               :items="dataItems">
        <SuggestionView ~suggestionView suggestionViewHeight="300">
          <StackLayout v-suggestionItemTemplate orientation="vertical" padding="10">
            <v-template>
              <Label :text="item.text"></Label>
            </v-template>
          </StackLayout>
        </SuggestionView>
      </RadAutoCompleteTextView>
    </StackLayout>
  </Page>
  `,
  data () {
    return {
      dataItems: new ObservableArray(),
    };
  },
  mounted () {
    const jsonUrl = 'https://raw.githubusercontent.com/telerik/nativescript-ui-samples/master/examples-data/airports.json';

    this.$refs.autocomplete.setLoadSuggestionsAsync((text) => {
      const promise = new Promise((resolve, reject) => {
          http.getJSON(jsonUrl).then((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 ${jsonUrl}: ${err.message}`;
              console.log(message);
              alert(message);
              reject();
          });
      });

      return promise;
    });
  },
};

感谢启发我！

Answer 1

Try removing the typings.

http.getJSON(jsonUrl).then((r: any) => {

will become

http.getJSON(jsonUrl).then((r) => {

Also

const items: Array<TokenModel> = new Array();

will become

const items = new Array();

Answer 2

我只是遇到了类似的情况，虽然我可以使它正常工作，但我对如何将AutoComplete项目设置为setLoad中从未见过的本地dataItems数组感到有些困惑

使用远程json的Nativescript-vue自动完成

2 个答案: