Digamos que tengo elementos de configuración para mi componente. Si están disponibles, deberían estar en la salida; de lo contrario, no.
cfg = { name: "sam", address: "NY", age: 51 }; ... <p *ngIf="cfg.name != undefined">{{cfg.name}}</p> <p *ngIf="cfg.address != undefined">{{cfg.address}}</p> <p *ngIf="cfg.age != undefined">{{cfg.age}}</p>La verificación de definidos es bastante molesta si hay muchos elementos.
¿Hay alguna manera de hacerlo mejor?
Puede utilizar el operador de navegación segura (también conocido como encadenamiento opcional)
<p>{{cfg?.name}}</p> <p>{{cfg?.address}}</p> <p>{{cfg?.age}}</p> Otra opción es crear un contenedor ng de envoltura y aplicar *ngIf en él.
<ng-container *ngIf="cfg"> <p>{{cfg.name}}</p> <p>{{cfg.address}}</p> <p>{{cfg.age}}</p> </ng-container>