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绑定到模板中，这将是未定义的。

而且看起来您必须在uggestinationview中使用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之类的视图中显示

2 个答案: