javascript - 循环通过 json 检查某些数据是否存在，如果不显示不使用 ngFor 和 ngIf

Question

我在循环数据时使用 *ngFor 循环通过 json api，我想检查每个人，如果它没有家庭所以使用 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>

好的，我想显示该家庭对象数组是否存在 所以我想显示消息

标签： javascriptangularloops

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