He estado luchando para solucionar algunos problemas con div contenteditable
en Angular. Los problemas son los siguientes:
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>
<!-- This is my 2nd issue --> <div placeholder="{{myVar}}"></div>
¡¡¡GRACIAS!!!
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