dataItems 数组如何在视图中显示 JSON

Question

我对我的代码有疑问。

根据这段代码，我在控制台中显示了这个数组：

 public country: Country[] = [];
  public _items: TokenModel[] = [];
   @ViewChild("autocomplete") autocomplete: RadAutoCompleteTextViewComponent;

   ngOnInit(): void {
        this.getallcountry();
    }
    getallcountry() {
        this.ws.getAllCountryws().subscribe(
            country => {
                this.country = country;
                const mycountry = country;
                console.log('mycountry', mycountry) // show correct JSON
                 for (let i = 0; i < mycountry.length; i++) {
                console.log(mycountry.length) // show correct
                     this._items.push(new TokenModel(mycountry[i].company_id, null));
                }
            },
            err => console.error('err', err),
            () => console.log('error')
        );
    }
get dataItems(): TokenModel[] {
    console.log('this._items', this._items)
    return this._items;
}

在控制台中显示：

JS: this._items [Afghanistan, Albania, Algeria, American Samoa, Andorra, Angola, Anguilla, Antarctica, Antigua and Barbuda, Argentina, Armenia, Aruba, Australia, Austria, Azerbaijan, Bahamas, Bahrain, Bangladesh, Barbados, Belarus, Belgium, Belize, Benin, Bermuda, Bhutan, Bolivia, Bonaire, Bosnia and Herzegovina, Botswana, Bouvet Island, Brazil, British Indian Ocean Territory, Brunei Darussalam, Bulgaria, Burkina Faso, Burundi, Cambodia, Cameroon, Canada, Cape Verde, Cayman Islands, Central African Republic, Chad, Chile, China, Christmas Island, Cocos (Keeling) Islands, Colombia, Comoros, Congo, Democratic Republic of the Congo, Cook Islands, Costa Rica, Croatia, Cuba, CuraÃ§ao, Cyprus, Czech Republic, Cote d'Ivoire, Denmark, Djibouti, Dominica, Dominican Republic, Ecuador, Egypt, El Salvador, Equatorial Guinea, Eritrea, Estonia, Ethiopia, Falkland Islands (Malvinas), Faroe Islands, Fiji, Finland, France, French Guiana, French Polynesia, French Southern Territories, Gabon, Gambia, Georgia, Germany, Ghana, Gibra...

来自html 我想在自动完成中显示并编写此代码：

<RadAutoCompleteTextView #autocomplete [items]="dataItems" suggestMode="Suggest"
                displayMode="Tokens" row="1" col='0' hint="Country">
                <SuggestionView tkAutoCompleteSuggestionView>
                    <ng-template tkSuggestionItemTemplate let-country="item">
                        <StackLayout orientation="vertical" padding="10">
                            <Label [text]="text"></Label>
                        </StackLayout>
                    </ng-template>
                </SuggestionView>
            </RadAutoCompleteTextView>

在视图中没有显示任何内容。我认为问题是因为结果在数组中，而不是在 JSON.

中

你能建议我如何在视图国家/地区显示吗？

Answer 1

您正在使用默认 TokenModel，其中唯一有效的属性是 text 和 image。但是您正试图在您的模板中绑定 name ，这将是未定义的。

另外，您似乎必须在 SuggestionView 中使用 ObservableArray。

Updated Playground

Answer 2

你应该使用 Observables 因为这里是更新的代码

    public _items: ObservableArray<TokenModel>;

constructor(private service: ItemService) {
    this.getallcountry();
}

ngOnInit(): void {

}
getallcountry() {
    this._items = new ObservableArray<TokenModel>();
    let countries = this.service.getItems();
    for (let i = 0; i < countries.length; i++) {
        this._items.push(new TokenModel(countries[i].name, undefined));
    }
}
get dataItems(): ObservableArray<TokenModel> {
    //console.log('this._items', this._items)
    return this._items;
}

也在你的html

<StackLayout backgroundColor="#66cdaa" padding="5">
<Label text="Select country"></Label>
<RadAutoCompleteTextView [items]="dataItems" suggestMode="Suggest"
    displayMode="Tokens">
    <SuggestionView tkAutoCompleteSuggestionView>
        <ng-template tkSuggestionItemTemplate let-item="item">
            <StackLayout orientation="vertical" padding="10">
                <Label [text]="item.text"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>

这应该有效。

dataItems 数组如何在视图中显示 JSON

dataItems array how to display in view like JSON

autocomplete

nativescript

angular