Каков наилучший способ применить директиву ngif к элементу <li>?

Question

У меня есть такая структура:

class GrandParent{
  childsOfGrandParent: Parent[];
}

class Parent{
  child: Child;
}

class Child{
 x:number
 y:number
 z:number
}

Если у нас есть такой объект в .ts

  grandParent: GrandParent[] = [];

и в html:

<ul *ngFor="let parent of grandParent.childsOfGrandParent; let i = index;">

      <li  *ngIf="parent.child"> 
           {{child.x}}</li>
      <li  *ngIf="parent.child"> 
           {{child.y}}</li>
      <li  *ngIf="parent.child"> 
           {{child.z}}</li>

    </ul>

Что мне делать, если мы не хотим повторять ngIfs в этой структуре?

Answer 1

<ng-container *ngIf="parent.child">
      <li>{{child.x}}</li>
      <li>{{child.y}}</li>
      <li>{{child.z}}</li>
</ng-container>