Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

119
Vistas
Cómo usar contenteditable para cada elemento de una matriz en Angular

He estado luchando para solucionar algunos problemas con div contenteditable en Angular. Los problemas son los siguientes:

  1. Tengo cada elemento de la lista de matrices con su propio contenteditable pero con el mismo nombre de referencia de valor. El problema es que cada vez que intento enviar el contenido a la base de datos, solo el primer contenido no devuelve una cadena vacía, el resto de los elementos solo devuelven cadenas vacías una y otra vez. No estoy seguro de cómo solucionarlo después de navegar por Internet indefinidamente.

En app.component.ts tengo esto:

 @ViewChild("new_message_ref")newMessageRef?: ElementRef; newMessage:any = "" //This the method that should be sending message content to backend //but only sending successfully the date newMessage(user: any) { var messages = this.angFireBD.list("users/" + user.$key + "/messages"); messages.update(this.userService.currentUserUid, { //and this the content I've been sending to database content: this.newMessageRef?.nativeElement.innerText, sent: new Date().toLocaleDateString() }) }

En app.compenent.html, tengo esto:

 <li *ngFor="let user of allUsers"> <div #new_message_ref type="text" contenteditable="true" placeholder="Send a message to introduce yourself" [textContent]="newMessage" > </div> ... <span (click)="newMessage(user)">Send</span> </li>
  1. El último problema es que no puedo vincular una variable dentro del marcador de posición, pero puedo vivir con eso ahora mismo, ya que estoy mucho más preocupado por el primer problema:
 <!-- This is my 2nd issue --> <div placeholder="{{myVar}}"></div>

¡¡¡GRACIAS!!!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

use @ViewChildren , no ViewChild. ViewChild solo obtiene el primero de todos, por ejemplo:

 @ViewChildren('new_message_ref') messages:QueryList<ElementRef>

Vea que puede obtener el elemento ref en la posición "índice" usando

 const element=this.messages.find((_,i)=>i==index) console.log(element.nativeElement.innerText)

O recorrer todo

 this.messages.forEach(=>{ console.log(x.nativeElement.innerText) })

Ver los documentos sobre QueryList

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda