• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

215
Views
ERROR TypeError: no se pueden leer las propiedades de undefined (leyendo 'teléfonos')

Tengo un problema, aparece el error "core.js:4196 ERROR TypeError: Cannot read properties of undefined (reading 'phones')"

El caso es que me dice que el array de objetos que estoy recorriendo está vacío, al revisar un poco y hacer depuración me doy cuenta que no es así. Eso en realidad no viene indefinidamente, los datos son algo grandes, eso sí, entre 2800 datos te trae casi 5 o 6 teléfonos (ya que esos son los que están registrados)

De todos modos, lo que realmente quiero hacer es obtener los números de teléfono de "x" usuarios de un objeto y hacer un autocompletado filtrando los datos.

Te dejo el código, tal vez veas algo que yo no:

.TS

 contactos: AddContacto[] = []; filteredContacts: Observable<AddContacto[]>; phoneControl: FormControl = new FormControl(); this.filteredContactos = this.phoneControl.valueChanges.pipe( startWith(null), map((search: string | null) => (search ? this._filterContactos(search) : this.contactos.slice())), ); private _filterContactos(search: string) { const filterValue = search.toLowerCase(); return this.contact.filter( (contact) => !!contact.phones.find((email) => contact.includes(search)) || contact.fullName.toLowerCase().includes(filterValue), ); }

.HTML

 <div class="containerTitle p-16"> <mat-form-field fxFlex="100" class="mr-12" appearance="outline" fxFlex="100"> <mat-label>Search Client</mat-label> <input type="text" placeholder="Add email..." matInput [formControl]="phoneControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete" > <mat-option *ngFor="contact of filteredContacts | async" [value]="contact.phones[0]"> {{contact?.phones[0]}} {{contact?.fullName ? '('+ contacto?.nombre_completo +')' : ''}} </mat-option> </mat-autocomplete> </mat-form-field> <small-loading class="loadingProgressBar" [loading]="loading"></small-loading> </div>

Objeto

 0: { "state": true, "coments": null, "phones": ["22222222"], "emails": [ "email@gmail.com" ], "fullName": "", "_id": "", "bitacora": {}, "__v": 0 }

¡¡Gracias!!

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Ese error se debe a que está utilizando una versión anterior de TypeScript y es necesario verificar si la matriz existe y la longitud es mayor que 0 para usar cualquier método de matriz como filter, find, foreach, etc.

Cambie esto en su método _filterContactos.

 private _filterContactos(search: string) { const filterValue = search.toLowerCase(); return this.contact.filter( (contact) => { if (contact.phones && contact.phones.length > 0) { !!contact.phones.find((email) => contact.includes(search)) || contact.fullName.toLowerCase().includes(filterValue) } } ); }

Déjame saber si funcionó para ti.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error