angular - Loopa över ett typescript-objekt med null-fält


Försöker loopa på ett objekt. Grejen är att objektet har några fält definierade till null, eftersom jag vill kringgå att Firebase inte accepterar undefined-värden. Här är objektet:

I model.ts

export interface Page {
  id: string;
  titre: string;
  pres: string;
  st1: null;
  st2: null;
  st3: null;
  st4: null;
  st5: null;
  pa1: string;
  pa2: null;
  pa3: null;
  pa4: null;
  pa5: null;
  image1: null;
  image2: null;
  image3: null;
  lien: null;
  nomlien: null;
}
In component.ts : 
 page: Page = {
    id: '',
    titre: '',
    pres: '',
    st1: null,
    pa1: '',
    st2: null,
    st3: null,
    st4: null,
    st5: null,
    pa2: null,
    pa3: null,
    pa4: null,
    pa5: null,
    image1: null,
    image2: null,
    image3: null,
    lien: null,
    nomlien: null,
  };

Jag kan få det här att fungera :

if (page.st1 === undefined || page.st1 === '') {
      page.st1 = null;
    }

Men jag skulle vilja göra detta i en loop på detta objekt, så att jag inte behöver 15 Ifs och mitt objekt fortfarande kan registreras i Firebase.

Jag har försökt med foreach, for in, for of, for i. Ingenting fungerar. Min IDE säger att det inte finns någon sådan egenskap i sidan.

Svar #1

Vi skulle kunna iterera över Object.entries(page) och där värdet av strängen '' har längd noll eller är undefined, ändrar vi nyckelvärdet till null.

  setNulls(page: any) {
    for (let [key, value] of Object.entries(page)) {
      if (value === undefined || String(value).length === 0) {
        page[key] = null;
      }
    }
  }

Här är ett fungerande exempel: https://stackblitz.com/edit/how-to-loop-object-keys-and-display-in-table-usin-l7pq7k?file=src%2Fapp%2Fapp.component.ts

Svar #2

Du kan göra det som nedan :-

if (page) {
  Object.keys(page).forEach((key) => {
    if (page[key] === undefined || page[key] === '') {
       page[key] = null;
    }
  })
}