перебирая json, чтобы проверить, существуют ли некоторые данные, если они не отображаются, не использует ngFor и ngIf

Question

Я перебираю json api с * ngFor, пока перебираю данные, я хочу проверить каждого человека, если у него нет семьи Поэтому, используя Angular ngIf, я хочу проверить, существует ли он, и отобразить данные, а если нет, показать «Нет семьи этого человека».

JSON

{
  "person": [
    {
      "name": "John",
      "Childrens": [
        {
          "name": "maria k",
          "age": "4 year"
        },
        {
          "name": "mary k",
          "age": "2 year"
        },
        {
          "name": "jon k",
          "age": "7 year"
        },
         ],
      "steps": [
        "1. abcdef",
        "2. 123456789",
        "3. mnbvcxz."
      ],
      "Family": [
        "Somedata",
        "Somedata",
        "Somedata"
      ]
    },
    {
      "name": "Mike",
      "Childrens": [
        {
          "name": "Some name",
          "age": "4 year"
        },
        {
          "name": "Some name",
          "age": "2 year"
        }   
      ],
      "steps": [
        "1. abcdef",
        "2. 123456789",
        "3. mnbvcxz."
      ],
      // No Family Data here 
    }
}

Я пытаюсь сделать это так, но не работает

HTML

 <div *ngFor="let onePerson of person.Family">
          <div *ngIf="!onePerson.Family?.length">
              <p class="text-center"> Family does not Exists</p>
          </div>
        </div>

Хорошо, я хочу показать, существует ли этот массив объектов семейства, или я смог использовать правильный ngFor, чтобы показать все, однако у меня пусто, где семейства не существует. Поэтому я хочу показать сообщение

Answer 1

НАЧИНАЕТСЯ HTML-ЧАСТЬ

<div *ngFor="let person of persons.person">
       <div *ngIf="!person.Family; else haveFamily">
          <p class="text-center">Family does not Exists</p> 
       </div>
       <ng-template #haveFamily>
          <div>
             <p class="text-center"> {{person | json}} </p>
          </div>
       </ng-template>
 </div>

А также небольшое замечание, что у вас, JSON, есть проблемы с запятой. Я очистил его, чтобы он был идеальным. Пожалуйста, найдите JSON ниже

persons =  {
  "person": [
    {
      "name": "John",
      "Childrens": [
        {
          "name": "maria k",
          "age": "4 year"
        },
        {
          "name": "mary k",
          "age": "2 year"
        },
        {
          "name": "jon k",
          "age": "7 year"
        }
      ],
      "steps": [
        "1. abcdef",
        "2. 123456789",
        "3. mnbvcxz."
      ],
      "Family": [
        "Somedata",
        "Somedata",
        "Somedata"
      ]
    },
    {
      "name": "Mike",
      "Childrens": [
        {
          "name": "Some name",
          "age": "4 year"
        },
        {
          "name": "Some name",
          "age": "2 year"
        }
      ],
      "steps": [
        "1. abcdef",
        "2. 123456789",
        "3. mnbvcxz."
      ]
    }
  ]
}

Answer 2

Вы можете сделать это

<div *ngFor="let person of person.Family">
  <div *ngIf="person?.Family">
          <p class="text-center"> {{person}} </p>
      </div>
  </div>
</div>

EDIT

Ваш ngFor должен быть как,

<div *ngFor="let personObj of person.persons">
          <div *ngIf="personObj?.Family">
              <p class="text-center"> {{personObj | json}} </p>
          </div>
         <div *ngIf="!personObj?.Family">
              <p class="text-center"> Family does not Exists</p>
          </div>
</div>

STACKBLITZ