我安装了PrimeNg . 我正在使用 p-autoComplete
组件,但现在出现此错误 . 我到处检查但找不到任何东西 . 此外,我只是试图复制一个正式的PrimeNg演示 . p-autocomplete组件 .
1 - 我已经安装了这样的PrimeNg .
npm install primeng --save
npm install primeicons --save
2 - 我已将模块添加到我的app.component.ts文件中 .
import { AutoCompleteModule } from 'primeng/autocomplete';
//other imports
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AutoCompleteModule
],
providers: [CountryServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }
3 - 使用Angular Cli我已经创建了一个服务并从primeNg官方网站添加了演示代码 .
4 - 我已经在我的app.component.ts文件中显示了我的服务 .
import { CountryServiceService } from './country-service.service';
...
providers: [CountryServiceService],
...
5 - 创建一个名为home的组件,在home.component.html中我复制并粘贴了官方网站deme代码 .
<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country"
[suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30" placeholder="Countries" [minLength]="1"></p-autoComplete>
<span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>
<h3>Advanced</h3>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30" [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
<ng-template let-brand pTemplate="item">
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
<img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px" />
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</ng-template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span>
<h3>Multiple</h3>
<span class="ui-fluid">
<p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
[minLength]="1" placeholder="Countries" field="name" [multiple]="true">
</p-autoComplete>
</span>
<ul>
<li *ngFor="let c of countries">{{c.name}}</li>
</ul>
6 - 在home.component.ts文件中我复制并粘贴了官方网站演示代码 .
7 - 在app.component.html中我添加了我的home组件,看看是否一切正常 .
所以,我做了这些步骤,我没有得到理想的行为,或者我甚至看不到渲染的HTML页面 .
当我检查页面时,我收到以下错误
那么,我做错了什么 . 严重!...愚蠢的PrimeNg
2 回答
您需要导入FormsModule,因为
ngModel
是其中的一部分:为我工作example
基本的HTML:
app.module.ts:
app.component.ts: