0

Estoy aprendiendo a usar Angular 4, y en mi esfuerzo por aprender quiero instalar el elemento Autocomplete de PrimeNG y obtengo el siguiente error:

introducir la descripción de la imagen aquí

Mi proyecto es básico y tengo lo siguiente:

autocomplete.component.html:

<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"></p-autoComplete>

autocomplete.component.ts

import { AutoCompleteModule } from 'primeng/primeng';
import { Component, OnInit } from '@angular/core';
import { AutocompleteService } from '../../servicios/autocomplete.service';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html'
})
export class AutocompleteComponent implements OnInit {

   text: string;
   results: string[];

   search(event) {
      console.log( event.query )
      //   this.mylookupservice.getResults(event.query).then(data => {
      //       this.results = data;
      //   });
   }

  constructor( private _autocompleteService:AutocompleteService ) { }

  ngOnInit() {
  }

}

autocomplete.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AutocompleteService {
   datos:any[] = [];
   urlBusqueda:string = "http://localhost:3000/consultas/";

   constructor( private http:Http ) {  }

   getDatos(termino:string){
      console.log( termino );

      // let query = `${ termino }`
      // let url = this.urlBusqueda + query;
      // return {};
      // console.log( url );
   }

}

Adempas, tengo referenciado el componente y el servicio en app.module.ts. ¿Qué puedo estar haciendo mal?

2 respuestas 2

2

Todos los imports de primeng los tienes que realizar en app-module, solamente los haces sobre tu componente(ademas de en app-modules) cuando tienes que declararlos y efectuar una función de los mismos. Ej:

import { Component, OnInit } from '@angular/core';
import { Message } from 'primeng/primeng';

export class Ejemplo implements OnInit {

message: Message[] = [];

constructor() { }

ngOnInit() {
  this.message = []
  this.message.push({ severity: 'info', summary: 'Buenas!', detail: 'Se cargo el componente de forma exitosa.' });    
}

En tu caso sería lo siguiente, dentro de app-module:

import { AutoCompleteModule } from 'primeng/primeng';

@NgModule({ declarations: [], import :[ AutoCompleteModule ], providers:[], bootstrap:[] })

También puedes declarar cualquier componente-hijo que abarque tu autocomplete.component (componente-padre), usando el decorador de angular ViewChild

HTML

<p-autoComplete #ac [(ngModel)]="text" [suggestions]="results"(completeMethod)="search($event)"></p-autoComplete>

TS

  //Child component
  @ViewChild('ac') autocomplete;

y así acceder a las propiedades, eventos y métodos del mismo

0

Realizar la siguiente importación en el app.module.ts

import { AutoCompleteModule } from 'primeng/primeng';

y añadir AutocompleteModule en el arreglo de los Imports.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AutoCompleteModule
  ],

Funciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.