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

Question

Я создал сервис для обмена данными с несколькими компонентами. В конце концов, процесс завершен, и мне нужно сбросить значения объекта службы. поэтому я попытался 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(),

  }
}

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

Answer 1

Вы можете сделать то, что предложил Amardeep Bhowmick, или вы можете создать простую функцию в вашем сервисе, которая возвращает тот же объект. Иметь такую ​​функцию

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(); Вы можете использовать то же самое даже для инициализации вашего объекта в первый раз.

Answer 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);

Answer 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)

Answer 4

Почему бы вам не создать класс 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());