在 Nativescript 中使用自动完成文本视图时如何保存 id

Question

我的代码有问题。

我正在使用自动完成文本视图。

首先，我从 API 获取所有国家/地区，带有 ID、名称等的简单 JSON。

 {
            "country_id": 249,
            "name": "Aland Islands",
            "short_name": "AX",
            "company_id": "11E76234942280FBB13FFA163ECD2069"
        },

我在自动完成中显示正确的数据名称。我要保存数据ID。

在 HTML 中：

<StackLayout backgroundColor="#66cdaa" padding="5">
    <Label text="Select country"></Label>
    <RadAutoCompleteTextView [items]="dataItems">
        <SuggestionView tkAutoCompleteSuggestionView>
            <ng-template tkSuggestionItemTemplate let-item="item">
                <StackLayout orientation="vertical" padding="10">
                    <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
        </SuggestionView>
    </RadAutoCompleteTextView>
    <Label text=""></Label>
    <Button class="my-button" text="Sign Up" (tap)="register()"></Button>
</StackLayout>

我创建了一个DEMO

如何注册ID。比如我选择Aland Islands，注册的时候想注册country_id: 249。

Answer 1

有多种方法可以做到这一点。最好的方法需要几个步骤，但可以为您提供最干净的代码，并且您可以为将来扩展它，轻松调试等

为了一切正常，请将包“nativescript-ui-autocomplet”更新到当前最新版本 (5.1.0)

1. 创建自定义令牌模型
2. 使用 onLoadedModel 事件注册 loadSuggestionsAsync 回调函数
3. 使用 didAutoComplete 事件获取选中项

自定义令牌模型示例：

export class CountryToken extends TokenModel {
    country_id: number;
    name: string;
    short_name: string;
    company_id: string;
    constructor(country_id: number, name: string, short_name: string, company_id: string) {
        super(name, null);
        this.country_id = country_id;
        this.name = name;
        this.short_name = short_name;
        this.company_id = company_id;
    }

    toString() {
        return this.name;
    }
}

绑定到事件 (loaded)="onLoadedCountry($event)"

不要忘记通过使用您自己的服务或从源中提取数据的方式来根据您的需要修改方法。

onLoadedCountry($event) {
    const radAutoComplete = <RadAutoCompleteTextView>$event.object;

    radAutoComplete.loadSuggestionsAsync = (text) => {
        return new Promise((resolve, reject) => {
            this.addressService.searchLocation(text).subscribe(
                (data) => {
                    const items: Array<CountryToken> = [];
                    data.forEach((item) => {
                        items.push(new CountryToken(item.country_id, item.name, item.short_name, item.company_id));
                    });
                    resolve(items);

                },
                (error) => {
                    console.log("error .");
                    console.log(error);
                }
            );
        });
    };
}

绑定其他事件获取结果 (didAutoComplete)="onCountrySelected($event)"

onCountrySelected($event: AutoCompleteEventData) {
    const token = <CountryToken>$event.token;
    console.log(token.country_id)
}

在 HTML 文件中使用它们，类似于：

RadAutoCompleteTextView (didAutoComplete)="onCountrySelected($event)" (loaded)="onLoadedCountry($event)" completionMode="Contains" suggestMode="Suggest" displayMode="Plain">
    <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
        <ng-template tkSuggestionItemTemplate let-item="item">
            <StackLayout orientation="vertical" padding="10">
                <Label [text]="item.name"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>

有关更多详细信息，请参阅此已关闭的 github 问题[RadAutoCompleteTextView] Allow passing customized Token Model