Как сбросить значения объекта формы и вложенного объекта без удаления ключей

ProgramBox

Как сбросить значения объекта формы и вложенного объекта без удаления ключей

Post author:admin
Запись опубликована:1 апреля, 2023
Post category:Вопросы по программированию

#javascript #angular #typescript #object #angular6

#javascript #angular #typescript #объект #angular6

Вопрос:

Я создал сервис для обмена данными с несколькими компонентами. в конце концов, процесс завершен, и мне нужно сбросить значения объекта service. итак, я попробовал this.UserDetails = {}; , он очищает значение и удаляет вложенный объект. просто сбросьте значение по умолчанию, назначенное как сервис.

Спасибо.

служебный файл

 import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class dataService {
  constructor() { }
  UserDetails: any = {
    key1 : '' ,
    key2: {
      Status: false,
      Label: ''
    },
    key3: {
      Status: false,
      Label: ''
    },
    key4: {
      Status: false,
      Label: ''
    },
    key5: '',
    key6: '',
    key7: new Date(),

  }
}

После присвоения значения в компонентах это выглядит так

 UserDetails = {
    key1 : 'value 1' ,
    key2: {
      Status: true,
      Label: 'label 1'
    },
    key3: {
      Status: false,
      Label: 'label 2'
    },
    key4: {
      Status: true,
      Label: 'label 3'
    },
    key5: 'key value 1',
    key6: 'key value 2',
    key7: new Date(),

  }
}

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

1. Является ли вложенный объект фиксированным или динамическим?

2. @Kishan статический, и у меня много полей вложенных объектов.

3. Итак, просто для уточнения — вы хотите удалить все прямые свойства, которые не являются объектами ( key1 , key5 , key6 , key7 )? И вы хотите сохранить только свойства объекта ( {} )?

4. Есть много способов изменить. Как вы ожидаете, что различные свойства будут выглядеть после сброса.

5. @RaviKumar Пожалуйста, добавьте ожидаемый результат.

Ответ №1:

Почему бы вам не создать UserDetails класс и не заполнить его данными. Во время сброса просто верните новый экземпляр класса.

Пожалуйста, смотрите фрагмент ниже для демонстрации, я использовал классы ES6 для объяснения концепции, но вы можете распространить это на Angular.

 class UserDetails {
    key1 = '';
    key2 = {
      Status: false,
      Label: ''
    };
    key3 = {
      Status: false,
      Label: ''
    };
    key4 = {
      Status: false,
      Label: ''
    };
    key5 = '';
    key6 = '';
    key7 = new Date();
}
class MyService {
 userDetails;
 constructor(){
   this.userDetails = new UserDetails();
 }
 populate(){
  this.userDetails.key1 ="foo"
  this.userDetails.key2 = {
      Status: true,
      Label: 'bar'
  };
  return this.userDetails;
 }
 reset(){
  this.userDetails = new UserDetails();
  return this.userDetails;
 }
}
let service = new MyService();
console.log(service.populate());
console.log("***********Resetting************");
console.log(service.reset());

Ответ №2:

Основываясь на том, что, я полагаю, вы хотите сделать, вы можете просто проверить, не является ли тип каждого дочернего элемента object :

 var UserDetails = {
  key1: '',
  key2: {
    Status: false,
    Label: ''
  },
  key3: {
    Status: false,
    Label: ''
  },
  key4: {
    Status: false,
    Label: ''
  },
  key5: '',
  key6: '',
  key7: new Date(),
};

Object.entries(UserDetails).forEach(([key, value]) => {
  if (typeof value != "object") {
    delete UserDetails[key];
  }
});

console.log(UserDetails);

1. OP очень неясен в требовании, в моем ответе я просто сохраняю структуру объекта, только очищая значения ключей.

2. Да @AmardeepBhowmick — это то, что, я полагаю , хочет OP, однако есть множество других возможностей.

Ответ №3:

Вы можете использовать reduce . Установите ключи, значения которых не являются объектом или они являются экземпляром Date , в пустую строку.

 const input = {
    key1 : '' ,
    key2: {
      Status: false,
      Label: ''
    },
    key3: {
      Status: false,
      Label: ''
    },
    key4: {
      Status: false,
      Label: ''
    },
    key5: '',
    key6: '',
    key7: new Date(),
}

const output = Object.entries(input).reduce((accu, [key, val]) => {
    if(typeof val != 'object' || input[key] instanceof Date) {
        accu[key] = "";
    } else {
        accu[key] = val;
    }
    return accu;
}, {});

console.log(output)

Ответ №4:

Вы можете сделать либо то, что предложил Амардип Бховмик, либо вы также можете создать простую функцию в своем сервисе, которая возвращает тот же объект. Есть функция, подобная этой

 private getUserDetailsObject():any{
    var userDetailsObject = {
            key1 : '' ,
            key2: {
              Status: false,
              Label: ''
            },
            key3: {
              Status: false,
              Label: ''
            },
            key4: {
              Status: false,
              Label: ''
            },
            key5: '',
            key6: '',
            key7: new Date(),

          }
    return userDetailsObject;
}

Когда вы хотите сбросить объект, вы можете просто использовать this.UserDetails = this.getUserDetailsObject();
Вы можете использовать то же самое даже для инициализации вашего объекта в самый первый раз.