angular - dataItems 数组如何像 JSON 一样在视图中显示
问题描述
我对我的代码有疑问。
从这段代码中,我在控制台中显示了这个数组:
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 中。
您能建议我如何在视图国家/地区展示吗?
解决方案
您应该使用 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>
这应该有效。
推荐阅读
- mongodb - Efficient Retrieve of MongoDB items in a time range
- javascript - 如何通过单击 mat-expansion-panel-header 来防止切换 mat-expansion-panel?
- c++ - 如何调试 MIT-DLEP 源?
- java - ForeignCollection throws SQLException on iterating using streams
- python - str.contains in pandas with if statement, python
- c# - DataGrid - 在 CellEditEnding() 之后触发的事件
- python - 如何将 series.isin 与不同的集合一起使用以获得不同的值?
- ios - 当我们按下菜单点击时,CAPSPageMenu 获取索引
- react-native - Load customised font in react native
- reactjs - ReactJS使用foreach错误循环图像