Изменение/замена элемента углового машинописного текста в массиве с помощью диалогового окна

#angular #typescript

Вопрос:

данные-Сервис.ts

 export interface ContactListEntry {  id: number;  name: string;  vorname: string;  mobileNumber: number;  secondMobileNumber: number;  email: string;  secondEmail: string;  roomNumber: string;  task: string;  notes: string; }   export const contact: ContactListEntry[] = [  { id: 1, name: 'Mustermann',vorname:'Max', mobileNumber: 123456, secondMobileNumber: 654321, email: 'MaxMustermann@beispiel.de', secondEmail: 'MaxMustermannSecond@beispiel.de', roomNumber: 'A101', task: "Rechenzentrum", notes: 'Notiz1' },  { id: 2, name: 'MMM',vorname:'nnn', mobileNumber: 111, secondMobileNumber: 222, email: 'mmm@beispiel.de', secondEmail: 'mmmsecond@beispiel.de', roomNumber: 'A102', task: "Rechenzentrum2", notes: 'Notiz2' },  { id: 3, name: 'EEE',vorname:'EEE', mobileNumber: 333, secondMobileNumber: 444, email: 'nnn@beispiel.de', secondEmail: 'nnnsecond@beispiel.de', roomNumber: 'B202', task: "Rechenzentrum3", notes: 'Notiz3' }, ];  

таблица-list.ts ( Основная )

 export class TableListComponent implements OnInit {   constructor(private DataServiceService: MatDialog) {  this.DataServiceService = DataServiceService;  }  object = contact;   entry: ContactListEntry = {  id: null,  name: '',  vorname: '',  mobileNumber: null, // Muss zu String umgeändert werden!  secondMobileNumber: null, // Muss zu String umgeändert werden!  email: '',  secondEmail: '',  roomNumber: '',  task: '',  notes: '',  }   openDialogEdit(entryEdit: any) {  var data = {  entryEdit: entryEdit,  }  this.DataServiceService.open(DialogEditContactComponent, {minWidth: "400px", minHeight: "400px", data});   }  

диалог-редактирование-контакт.ts

 constructor(private dataServiceService: DataServiceService,  @Inject(MAT_DIALOG_DATA) data: any) {   this.data = data;      this.entryEdit = this.data     }   ngOnInit(): void {  }   data: any;    entryEdit: ContactListEntry = {  id: 1,  name: '',  vorname: '',  mobileNumber: null,  secondMobileNumber: null,  email: '',  secondEmail: '',  roomNumber: '',  task: '',  notes: ' ',  }   saveEditContact(entryEdit: any){     entryEdit = contact.findIndex((obj =gt; obj.id == entryEdit.id));     contact[entryEdit].name = entryEdit.name    } }  

Я хочу, чтобы, когда я открываю свой компонент диалогового окна, я мог редактировать массив, и он отправляется в массив в службе данных и сохраняется.

Функция работает, если я напишу все в таблице-list.ts, но я хочу, чтобы я мог использовать ее в диалоговом окне-редактировать-контакт.ts

Ответ №1:

Вы можете добавить методы получения и настройки в свою службу данных, чтобы упростить доступ к этому массиву контактов. Я не уверен, что приведенный выше код data-service.ts-это весь ваш файл службы, но я бы переписал его как обычный сервис:

Я также взял на себя смелость переименовать contact contacts , чтобы быть более конкретным, что это несколько contacts , а не один contact .

 @Injectable({  providedIn: 'root', }) export class DataService {  contacts: ContactListEntry[] = [  { id: 1, name: 'Mustermann',vorname:'Max', mobileNumber: 123456, secondMobileNumber: 654321, email: 'MaxMustermann@beispiel.de', secondEmail: 'MaxMustermannSecond@beispiel.de', roomNumber: 'A101', task: "Rechenzentrum", notes: 'Notiz1' },  { id: 2, name: 'MMM',vorname:'nnn', mobileNumber: 111, secondMobileNumber: 222, email: 'mmm@beispiel.de', secondEmail: 'mmmsecond@beispiel.de', roomNumber: 'A102', task: "Rechenzentrum2", notes: 'Notiz2' },  { id: 3, name: 'EEE',vorname:'EEE', mobileNumber: 333, secondMobileNumber: 444, email: 'nnn@beispiel.de', secondEmail: 'nnnsecond@beispiel.de', roomNumber: 'B202', task: "Rechenzentrum3", notes: 'Notiz3' },  ];   // Get all current contacts  getContacts() {  return this.contacts;  }   // Update a contact at a given index  setContact(contact: ContactListEntry, i: number) {  this.contacts[i] = { ...contact };  } }  

Теперь в вашем dialog-edit-contact.ts ,

 saveEditContact(entryEdit: any){  // get current contacts array  const contacts = this.dataService.getContacts();   // Find which index the current contact is located  entryEdit = contacts.findIndex(obj =gt; obj.id === entryEdit.id);    // Here you can now update any values using the "..." (spread operator)  const updatedContact = {  ...contacts[entryEdit],  ...entryEdit  }    // Now using the new setter method, pass the updatedContact to be updated  this.dataService.setContact(updatedContact, entryEdit);  }  

С оператором распространения ( ... ) вот что происходит-gt;

   const updatedContact = {  // First we get the current contact object,  ...contacts[entryEdit],   // Then we overwrite any properties with the new edited object  ...entryEdit  }  

Это гарантирует, что вы сможете обновить объект независимо от того, какие свойства были изменены. И если бы были добавлены новые свойства, они были бы затем объединены в обновленный объект ContactListEntry.

Надеюсь, это ответ на ваш вопрос, пожалуйста, дайте мне знать, если у вас есть вопросы!

Комментарии:

1. Здравствуйте, спасибо за ваш ответ, но он не работает, я пытаюсь, но в постоянном обновленном контакте и обновлении контакт красный ( диалоговое окно-редактирование-контакт.компонент.ts(67, 11): здесь объявлено «контакты».)

2. Я не уверен, где имеется в виду ошибка, но я заметил ошибку в своем ответе, contact должно было быть contacts : ...contact[entryEdit], было изменено на ...contacts[entryEdit],

3. Да, я изменил его, но это не работает