#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. Да, я изменил его, но это не работает