javascript - 遍历 json 以检查某些数据是否存在(如果不显示)不使用 ngFor 和 ngIf

Question

我在遍历数据时使用 *ngFor 遍历 json api，我想检查每个人，如果它没有 Family 因此，使用 Angular ngIf 我想检查它是否存在并显示数据，如果不存在则显示此人的 No family。

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

你可以这样做

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

编辑

你的 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