动态更新数据

如何解决动态更新数据

这里是 HTML 代码。我创建了表格并使用了一些 ng modal

<div class="container">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Website</th>
                <th>Edit data</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let contact of contacts">
                <td><span>{{ contact.name }}</span></td>
                <td><span>{{ contact.username }}</span></td>
                <td><span>{{ contact.email }}</span></td>
                <td><span>{{ contact.phone }}</span></td>
                <td><span>{{ contact.website }}</span></td>
                <td><button class="edit-data" (click)="openEdit(contentEdit,contact)">Edit</button></td>
            </tr>
        </tbody>
    </table>
</div>

<ng-template #contentEdit let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Edit data</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form [formGroup]="editForm" novalidate>
            <div class="form-group">
                <label for="name">Name</label>
                <div class="input-group">
                    <input formControlName="name" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="username">Username</label>
                <div class="input-group">
                    <input formControlName="username" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <div class="input-group">
                    <input formControlName="email" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="phone">Phone</label>
                <div class="input-group">
                    <input formControlName="phone" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="website">Website</label>
                <div class="input-group">
                    <input formControlName="website" class="form-control">
                </div>
            </div>
            <div class="border text_center">
                <button data-dismiss="modal" class="btn btn-info" (click)="updateContent()">Save changes</button>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Cancel</button>
    </div>
</ng-template>

我正在尝试编写无需后端即可自动更新数据的函数。我认为它应该与数组一起使用（通过键查找一些数据并将其更改为新的输入值）。你能帮我理解一下吗？我应该使用哪种方法？

    export class ContactListComponent implements OnInit {
     
      contacts: Contact[] = [];
      editForm!: FormGroup;
      patchValue!: void;
      closeResult!: string;
      contact!: Contact;

      constructor(
        private httpClient: HttpClient,private fb: FormBuilder,private modalService: NgbModal
      ) { }

      ngOnInit(): void {
        this.updateContact();
        this.contacts = [];
        this.getContacts();
        this.editForm = this.fb.group({
          name: [''],username: [''],email: [''],phone: [''],website: ['']
        });
      }

      getContacts() {
        this.httpClient.get<any>('some url').subscribe(
          response => {
            console.log(response);
            this.contacts = response;
            localStorage.setItem('contacts',JSON.stringify(this.contacts));
            localStorage.getItem('contact');
          }
        );
      }
      

      openEdit(targetModal:any,contact:Contact) {
        this.modalService.open(targetModal,{
          centered: true,backdrop: 'static',size: 'lg'
        });
        this.editForm.patchValue({
          name: contact.name,username: contact.username,email: contact.email,phone: contact.phone,website: contact.website
        });
      }

      updateContact(): any {
        ???? problem is here
       }

解决方法

您是否尝试过无后端数据库平台？比如火力点。我建议尝试angularFire

就这么简单，

updateContact(id: string,contact:Contact) {
  let doc = this.afs.collection('values',ref => ref.where('id','==',id));
  doc.snapshotChanges().subscribe((res: any) => {
    let id = res[0].payload.doc.id;
    this.afs.collection('values').doc(id).update(contact);
  });
}

请注意，如果您的 id 是唯一的并且只返回一个查询结果，这应该有效

,

假设您没有任何不可变字段（您不允许用户编辑的字段，例如联系人 ID），您必须在选择更新时存储联系人索引，因为用户可以更改所有字段并且您将无法判断哪个联系人更新了。

例如 在 HTML 中

<tr *ngFor="let contact of contacts;let i = index">
    <td><span>{{ contact.name }}</span></td>
    <td><span>{{ contact.username }}</span></td>
    <td><span>{{ contact.email }}</span></td>
    <td><span>{{ contact.phone }}</span></td>
    <td><span>{{ contact.website }}</span></td>
    <td><button class="edit-data" (click)="openEdit(contentEdit,contact,i)">Edit</button></td>
</tr>

并更新您的模态函数以将索引作为参数，以便它可以保存当前选择的联系人。

openEdit(targetModal:any,contact:Contact,contactIndex: number) {
    this.selectedContactIndex = contactIndex;
    this.modalService.open(targetModal,{
      centered: true,backdrop: 'static',size: 'lg'
    });
    this.editForm.patchValue({
      name: contact.name,username: contact.username,email: contact.email,phone: contact.phone,website: contact.website
    });
  }

然后每当您更新更改时，只需覆盖该索引处的对象。

updateContact(): any {
    // Do your validations here
    const formValue = this.editForm.value;
    this.contacts[this.selectedContactIndex] = formValue;
}

PS：如果可以有一些用户在编辑联系人时无法更改的字段（例如contactId）会更好，以便您保存更改的工作更容易。这样您就可以简单地使用 Array.find 通过使用联系人 ID 从数组中获取相应的对象，而不必将索引保存在某处。