javascript - Bagaimana cara menghindari pemantulan data yang dimasukkan di popup ke tabel sebelum disimpan menggunakan Angular2

Saya memiliki popup edit, ketika popup terbuka dan saya mengedit, itu langsung tercermin di tabel. Saya harus menghindari refleksi ini, hanya setelah saya mengklik tombol simpan bagian yang diedit yang harus ditampilkan di tabel. Saya hanya bisa melakukan ini untuk satu input, saya tidak mengerti bagaimana melakukan hal yang sama untuk 2 input lainnya.

//Ts

editTutorial(tutorial) {
  this.editTutorials.show();
  this.edit_tut = tutorial;
}

Jawaban #1

Anda menetapkan nilai tutorial yang Anda kirim dari tabel ke variabel edit_tut, yang berfungsi sebagai two-way binding.

jadi, data dalam tabel berubah seiring dengan input Anda.

Solusinya bisa dengan mengubah referensi variabel, Anda bisa melakukan sesuatu seperti,

editTutorial(tutorial) {
 this.editTutorials.show();
 let tut = JSON.parse(JSON.stringify(tutorial))
 this.edit_tut = tut;
}

Ini akan mengubah referensi nilai dan akan bekerja untuk Anda.

Jawaban #2

Anda harus memiliki dua properti berbeda pada komponen Anda, yang merujuk pada dua instance objek yang berbeda. Beberapa hal yang perlu dilakukan:

Langkah 1: ketika mengklik "edit", buat salinan dari baris tabel (semua properti) dan masukkan ke dalam modal. Pertahankan referensi ke, misalnya baris tabel yang sedang Anda sunting, atau _id atau sesuatu.

Dalam kasus Anda, tambahkan properti ke TutorialComponent yang disebut currentlyEditing: any. Kemudian, ubah metode editTutorial Anda:

editTutorial(tutorial) {
  this.editTutorials.show();
  this.currentlyEditting = tutorial;
}

Langkah 2: mengedit itu tidak seharusnya mempengaruhi tabel. Lanjutkan dan edit halmu.

Langkah 3: setelah menyimpan, sinkronkan perubahan Anda kembali ke tabel, atau lebih tepatnya, ke set data asli yang ditampilkan di tabel. Itulah mengapa Anda memerlukan referensi dari langkah 1.

Sekarang, saya tidak yakin apakah komponen edit_tut Anda adalah yang menyimpan perubahan. Tetapi jika memang begitu, saya pikir semuanya akan bekerja seperti sekarang. Jika tidak, Anda harus, setelah menyimpan dan menerima respons "sukses", pergi dan menemukan tutorial asli di array tutorials, dan menggantinya dengan komponen yang telah diedit.