我正在使用primeng组件的自动完成字段输入国家/地区数据。我导入了所有必需的模块，但出现错误：
无法读取未定义的属性“ toLowerCase”。
我找不到遗失的东西？删除toLowerCase()方法后，我又遇到了另一个错误：
无法读取未定义的属性'indexOf'。
请帮助我解决这些错误，这里我在表单组件中使用联系人组件。
contactform.component.ts
import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { CardModule } from 'primeng/card';
import { CalendarModule } from 'primeng/calendar';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { Response } from '@angular/http/src/static_response';
import {SelectItem} from 'primeng/api';
import { CountryService } from './country-list.service';
@Component({
moduleId: module.id,
selector: 'sd-contactform',
templateUrl: 'contactform.component.html',
styleUrls: ['contactform.component.css']
})
export class ContactFormComponent implements OnInit {
country: any;
filteredCountriesSingle: any[];
constructor(private countryService: CountryService) { }
filterCountrySingle(event) {
let query = event.query;
this.countryService.getCountries().then(countries => {
this.filteredCountriesSingle = this.filterCountry(query, countries);
});
}
filterCountry(query, countries: any[]):any[] {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
let filtered : any[] = [];
for(let i = 0; i < countries.length; i++) {
let country = countries[i];
if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
return filtered;
}
}
Country-list.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
// import 'rxjs/add/operator/do'; // for debugging
/**
* This class provides the NameList service with methods to read names and add names.
*/
@Injectable()
export class CountryService {
constructor(private http: HttpClient) {}
getCountries() {
return this.http.get('app/form/country.json')
.toPromise()
.then(res => <any[]> res)
.then(data => { return data; });
}
}
contact.component.html
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="auto"
placeholder="Country" [minLength]="1" name="something"></p-autoComplete>
form.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent } from './form.component';
import { FormRoutingModule } from './form-routing.module';
import { SharedModule } from '../shared/shared.module';
import {TabViewModule} from 'primeng/tabview';
import {CardModule} from 'primeng/card';
import { DemographicFormComponent } from './demographicform.component';
import { ContactFormComponent } from './contactform.component';
import { EducationFormComponent } from './educationform.component';
import { SkillActivityFormComponent } from './skillactivityform.component';
import { EmployerDetailFormComponent } from './employerdetailform.component';
import { ProjectFormComponent } from './projectform.component';
import { VoluenteeringExpformFormComponent } from './volunteeringExpform.component';
import { CertificationFormComponent } from './certificationform.component';
import { CourseFormComponent } from './courseform.component';
import { HonorAwardFormComponent } from './honorawardform.component';
import { LanguageFormComponent } from './languageform.component';
import { PatentFormComponent } from './patentform.component';
import { PublicationFormComponent } from './publicationform.component';
import {DataListModule} from 'primeng/datalist';
import {SidebarModule} from 'primeng/sidebar';
import {SlideMenuModule} from 'primeng/slidemenu';
import {MenuItem} from 'primeng/api';
import { CalendarModule } from 'primeng/calendar';
import { FormsModule } from '@angular/forms';
import {RadioButtonModule} from 'primeng/radiobutton';
import {InputTextModule} from 'primeng/inputtext';
import {DropdownModule} from 'primeng/dropdown';
import {KeyFilterModule} from 'primeng/keyfilter';
import {AutoCompleteModule} from 'primeng/autocomplete';
import {TableModule} from 'primeng/table';
import {PanelModule} from 'primeng/panel';
import {ButtonModule} from 'primeng/button';
import {CheckboxModule} from 'primeng/checkbox';
import {SliderModule} from 'primeng/slider';
import {InputMaskModule} from 'primeng/inputmask';
import {InputTextareaModule} from 'primeng/inputtextarea';
import {ChipsModule} from 'primeng/chips';
import { HonorawardComponent } from '../person/honoraward.component';
import {CodeHighlighterModule} from 'primeng/codehighlighter';
@NgModule({
imports: [CommonModule,FormsModule,FormRoutingModule,CodeHighlighterModule,PanelModule,ChipsModule,InputTextareaModule,SliderModule,InputMaskModule,CheckboxModule,ButtonModule,TableModule,KeyFilterModule,AutoCompleteModule,DropdownModule,RadioButtonModule,TabViewModule,InputTextModule,DataListModule,CardModule,SidebarModule,SlideMenuModule,CalendarModule],
declarations: [FormComponent,DemographicFormComponent,ContactFormComponent,PatentFormComponent,PublicationFormComponent,LanguageFormComponent,HonorAwardFormComponent,CertificationFormComponent,CourseFormComponent,EducationFormComponent,VoluenteeringExpformFormComponent,SkillActivityFormComponent,EmployerDetailFormComponent,ProjectFormComponent],
exports: [FormComponent]
})
export class FormModule { }
form.component.html
<sd-contactform></sd-contactform>
contry.json
[
{"country" : "Afghanistan"},
{"country" : "Albania"},
{"country" : "Algeria"},
{"country" : "American Samoa"},
{"country" : "Andorra"},
{"country" : "Angola"},
{"country" : "Anguilla"},
{"country" : "Antarctica"},
{"country" : "Antigua and Barbuda"},
{"country" : "Argentina"},
{"country" : "Armenia"},
{"country" : "Aruba"},
{"country" : "Australia"},
{"country" : "Austria"},
{"country" : "Azerbaijan"},
{"country" : "Bahamas"},
{"country" : "Bahrain"},
{"country" : "Bangladesh"},
{"country" : "Barbados"},
{"country" : "Belarus"},
{"country" : "Belgium"},
{"country" : "Belize"},
{"country" : "Benin"},
{"country" : "Bermuda"},
{"country" : "Bhutan"},
{"country" : "Bolivia"},
{"country" : "Bosnia and Herzegovina"},
{"country" : "Botswana"},
{"country" : "Bouvet Island"},
{"country" : "Brazil"},
{"country" : "British Indian Ocean Territory"},
{"country" : "Brunei"},
{"country" : "Bulgaria"},
{"country" : "Burkina Faso"},
{"country" : "Burundi"},
{"country" : "Cambodia"},
{"country" : "Cameroon"},
{"country" : "Canada"},
{"country" : "Cape Verde"},
{"country" : "Cayman Islands"},
{"country" : "Central African Republic"},
{"country" : "Chad"},
{"country" : "Chile"},
{"country" : "China"},
{"country" : "Christmas Island"},
{"country" : "Cocos (Keeling) Islands"},
{"country" : "Colombia"},
{"country" : "Comoros"},
{"country" : "Congo"},
{"country" : "The Democratic Republic of Congo"},
{"country" : "Cook Islands"},
{"country" : "Costa Rica"},
{"country" : "Ivory Coast"},
{"country" : "Croatia"},
{"country" : "Cuba"},
{"country" : "Cyprus"},
{"country" : "Czech Republic"},
{"country" : "Denmark"},
{"country" : "Djibouti"},
{"country" : "Dominica"},
{"country" : "Dominican Republic"},
{"country" : "East Timor"},
{"country" : "Ecuador"},
{"country" : "Egypt"},
{"country" : "England"},
{"country" : "El Salvador"},
{"country" : "Equatorial Guinea"},
{"country" : "Eritrea"},
{"country" : "Estonia"},
{"country" : "Ethiopia"},
{"country" : "Falkland Islands"},
{"country" : "Faroe Islands"},
{"country" : "Fiji Islands"},
{"country" : "Finland"},
{"country" : "France"},
{"country" : "French Guiana"},
{"country" : "French Polynesia"},
{"country" : "French Southern territories"},
{"country" : "Gabon"},
{"country" : "Gambia"},
{"country" : "Georgia"},
{"country" : "Germany"},
{"country" : "Ghana"},
{"country" : "Gibraltar"},
{"country" : "Greece"},
{"country" : "Greenland"},
{"country" : "Grenada"},
{"country" : "Guadeloupe"},
{"country" : "Guam"},
{"country" : "Guatemala"},
{"country" : "Guinea"},
{"country" : "Guinea-Bissau"},
{"country" : "Guyana"},
{"country" : "Haiti"},
{"country" : "Heard Island and McDonald Islands"},
{"country" : "Holy See (Vatican City State)"},
{"country" : "Honduras"},
{"country" : "Hong Kong"},
{"country" : "Hungary"},
{"country" : "Iceland"},
{"country" : "India"},
{"country" : "Indonesia"},
{"country" : "Iran"},
{"country" : "Iraq"},
{"country" : "Ireland"},
{"country" : "Israel"},
{"country" : "Italy"},
{"country" : "Jamaica"},
{"country" : "Japan"},
{"country" : "Jordan"},
{"country" : "Kazakstan"},
{"country" : "Kenya"},
{"country" : "Kiribati"},
{"country" : "Kuwait"},
{"country" : "Kyrgyzstan"},
{"country" : "Laos"},
{"country" : "Latvia"},
{"country" : "Lebanon"},
{"country" : "Lesotho"},
{"country" : "Liberia"},
{"country" : "Libyan Arab Jamahiriya"},
{"country" : "Liechtenstein"},
{"country" : "Lithuania"},
{"country" : "Luxembourg"},
{"country" : "Macao"},
{"country" : "Macedonia"},
{"country" : "Madagascar"},
{"country" : "Malawi"},
{"country" : "Malaysia"},
{"country" : "Maldives"},
{"country" : "Mali"},
{"country" : "Malta"},
{"country" : "Marshall Islands"},
{"country" : "Martinique"},
{"country" : "Mauritania"},
{"country" : "Mauritius"},
{"country" : "Mayotte"},
{"country" : "Mexico"},
{"country" : "Micronesia, Federated States of"},
{"country" : "Moldova"},
{"country" : "Monaco"},
{"country" : "Mongolia"},
{"country" : "Montserrat"},
{"country" : "Morocco"},
{"country" : "Mozambique"},
{"country" : "Myanmar"},
{"country" : "Namibia"},
{"country" : "Nauru"},
{"country" : "Nepal"},
{"country" : "Netherlands"},
{"country" : "Netherlands Antilles"},
{"country" : "New Caledonia"},
{"country" : "New Zealand"},
{"country" : "Nicaragua"},
{"country" : "Niger"},
{"country" : "Nigeria"},
{"country" : "Niue"},
{"country" : "Norfolk Island"},
{"country" : "North Korea"},
{"country" : "Northern Ireland"},
{"country" : "Northern Mariana Islands"},
{"country" : "Norway"},
{"country" : "Oman"},
{"country" : "Pakistan"},
{"country" : "Palau"},
{"country" : "Palestine"},
{"country" : "Panama"},
{"country" : "Papua New Guinea"},
{"country" : "Paraguay"},
{"country" : "Peru"},
{"country" : "Philippines"},
{"country" : "Pitcairn"},
{"country" : "Poland"},
{"country" : "Portugal"},
{"country" : "Puerto Rico"},
{"country" : "Qatar"},
{"country" : "Reunion"},
{"country" : "Romania"},
{"country" : "Russian Federation"},
{"country" : "Rwanda"},
{"country" : "Saint Helena"},
{"country" : "Saint Kitts and Nevis"},
{"country" : "Saint Lucia"},
{"country" : "Saint Pierre and Miquelon"},
{"country" : "Saint Vincent and the Grenadines"},
{"country" : "Samoa"},
{"country" : "San Marino"},
{"country" : "Sao Tome and Principe"},
{"country" : "Saudi Arabia"},
{"country" : "Scotland"},
{"country" : "Senegal"},
{"country" : "Seychelles"},
{"country" : "Sierra Leone"},
{"country" : "Singapore"},
{"country" : "Slovakia"},
{"country" : "Slovenia"},
{"country" : "Solomon Islands"},
{"country" : "Somalia"},
{"country" : "South Africa"},
{"country" : "South Georgia and the South Sandwich Islands"},
{"country" : "South Korea"},
{"country" : "South Sudan"},
{"country" : "Spain"},
{"country" : "SriLanka"},
{"country" : "Sudan"},
{"country" : "Suriname"},
{"country" : "Svalbard and Jan Mayen"},
{"country" : "Swaziland"},
{"country" : "Sweden"},
{"country" : "Switzerland"},
{"country" : "Syria"},
{"country" : "Tajikistan"},
{"country" : "Tanzania"},
{"country" : "Thailand"},
{"country" : "Togo"},
{"country" : "Tokelau"},
{"country" : "Tonga"},
{"country" : "Trinidad and Tobago"},
{"country" : "Tunisia"},
{"country" : "Turkey"},
{"country" : "Turkmenistan"},
{"country" : "Turks and Caicos Islands"},
{"country" : "Tuvalu"},
{"country" : "Uganda"},
{"country" : "Ukraine"},
{"country" : "United Arab Emirates"},
{"country" : "United Kingdom"},
{"country" : "United States"},
{"country" : "United States Minor Outlying Islands"},
{"country" : "Uruguay"},
{"country" : "Uzbekistan"},
{"country" : "Vanuatu"},
{"country" : "Venezuela"},
{"country" : "Vietnam"},
{"country" : "Virgin Islands, British"},
{"country" : "Virgin Islands, U.S."},
{"country" : "Wales"},
{"country" : "Wallis and Futuna"},
{"country" : "Western Sahara"},
{"country" : "Yemen"},
{"country" : "Yugoslavia"},
{"country" : "Zambia"},
{"country" : "Zimbabwe"}
]
答案 0 :(得分：0)
您的国家/地区json不包含名称属性。您仅具有{ country: "name" }个对象的列表。这意味着country.name将永远不会被填充。
尝试使用country.country代替country.name。外部国家/地区是{ country: "name" }对象，内部.country将得出"name"。
这也是正确使用Typescript的一个很好的例子。正确输入国家对象将使Typescript告诉您country.name不存在。通常不鼓励在Typescript中使用any。