动态更新数据

Question

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

​

<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
       }

Answer 1

假设您没有任何不可变的字段(字段，您不允许用户编辑例如。当您选择更新联系人索引时，您将不得不存储它的索引，因为用户可以更改所有字段，并且您将无法判断哪个联系人已被更新。

例如在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通过使用contact id从数组中获取相应的对象，而不必将索引保存在某个地方。

Answer 2

你试过回溯式数据库平台吗？就像火基地。我建议试试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是唯一的，并且只返回一个查询结果，这应该可以工作。