Angular中如何给数组每一项绑定contenteditable并正确提交内容

问题1（提交仅第一个列表项内容生效）解决方案 #

根因 #

• @ViewChild匹配同名模板引用时，默认只会返回页面中第一个符合条件的DOM元素，你在*ngFor循环中给所有contenteditable div设置了同一个#new_message_ref，因此永远只能拿到第一个列表项的输入内容。
• 所有div统一绑定同一个newMessage变量逻辑不合理，会导致修改任意一个输入框的内容同步到所有列表项中。

修复代码 #

1. 修改HTML代码，点击发送时直接将当前循环项对应的div引用传入方法：

<li *ngFor="let user of allUsers">
  <div
    #new_message_ref
    type="text"
    contenteditable="true"
    placeholder="Send a message to introduce yourself"
    <!-- 建议改为绑定每个用户独立的消息字段，比如[textContent]="user.currentMessage" -->
    [textContent]="newMessage"
  ></div>
  ...
  <span (click)="newMessage(user, new_message_ref)">Send</span>
</li>

2. 修改TS代码，移除@ViewChild声明，直接使用传入的DOM引用取值：

newMessage:any = ""

// 修改参数接收当前列表项的div引用
newMessage(user: any, msgRef: ElementRef) {
  var messages = this.angFireBD.list("users/" + user.$key + "/messages");
  messages.update(this.userService.currentUserUid, {
    content: msgRef.nativeElement.innerText,
    sent: new Date().toLocaleDateString()
  })
  // 提交后清空输入的话，如果用全局变量就清this.newMessage，如果用user独立字段就清user.currentMessage
}

问题2（contenteditable div的placeholder绑定变量失效）解决方案 #

根因 #

placeholder不是div的原生标准属性，直接用{{}}插值绑定会被Angular识别为DOM Property绑定，而div的Property中不存在placeholder，因此绑定失效。

修复代码 #

添加attr.前缀，声明是绑定DOM Attribute：

<div [attr.placeholder]="myVar"></div>

内容的提问来源于stack exchange，提问作者jbz