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>

好吧，我想显示该族对象数组是否存在，我可以使用正确的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

Answer 2

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."
      ]
    }
  ]
}

循环遍历json以检查somedata是否存在（如果未显示）不使用ngFor和ngIf

2 个答案: