angular - ngModel แสดงค่าที่เหมือนกันสำหรับฟิลด์ที่แตกต่างกัน

นี่คืโครงการ Angular 5 และ Firestore ฉันกำลังใช้ฟอร์มกับ [(ngModel)] เพื่ออัปเดตเอกสารในฐานข้อมูล การอัปเดตสำเร็จ แต่การที่ [(ngModel)] แสดงค่าฟิลด์ของเอกสารในช่องป้อนข้อมูลเองนั้นไม่ถูกต้อง เช่น ตัวข้อความแสดงตัวอย่าง (placeholder) ผิด แต่ละช่องป้อนข้อมูลจะแสดงค่าฟิลด์เดียวกัน ทั้งที่ควรจะต่างกัน ตัวอย่างเช่น

ในฐานข้อมูล เอกสารของฉันดูเหมือนแบบนี้

document
  field1: document title
  field2: google
  field3: https://www.google.com

แต่กล่องป้อนข้อมูลของฉันแสดงแบบนี้

กล่องใส่ข้อมูล 1 แสดง https://www.google.com

กล่องใส่ข้อความ 2 แสดง https://www.google.com

กล่องใส่ข้อมูล 3 แสดง https://www.google.com

นี่คือ HTML

<ng-container *ngFor="let x of xyz | async">
  <div class="columns">
    <div class="column">
      <form>
        <input [(ngModel)]="x.field1" #v1>
        <input [(ngModel)]="x.field2" #v2>
        <input [(ngModel)]="x.field3" #v3>
        <button (click)="update(v1.value, v2.value, v3.value)">update</button>
      </form>
    </div>
    <div class="column">
      {{x.field1}} #### <-- THESE WORK FINE
      {{x.field2}}
      {{x.field3}}
    </div>
  </div>
</ng-container>

ฉันพลาดอะไรไปใน component.ts หรือเปล่า?

คำตอบ #1

คุณต้องตั้งชื่อให้กับข้อมูลนำเข้าของคุณ และแต่ละข้อมูลนำเข้าต้องมีชื่อที่แตกต่างกัน

คำตอบ #2

ลบแท็กฟอร์มออกเพราะ ngmodel ภายในฟอร์มอาจทำให้เกิดปัญหาได้