El objeto es posiblemente 'indefinido'. Recibo un error, mis códigos son los que se ven a continuación, ¿cuál crees que es el problema?

aplicación.componente.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { serverElements = [{type: 'server', name:'TestS',content:'Just'}]; }

aplicación.componente.html

 <div class="container"> <app-cockpit></app-cockpit> <hr> <div class="row"> <div class="col-xs-12"> <app-server-element *ngFor="let serverElement of serverElements" [element]="serverElement"> </app-server-element> </div> </div> </div>

app.servidor-elemento-componente.html

 <div class="panel panel-default"> <div class="panel-heading">{{ element.name }}</div> <div class="panel-body"> <p> <strong *ngIf="element.type === 'server'" style="color: red">{{ element.content }}</strong> <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em> </p> </div> </div>

y servidor-elemento-componente.ts

 import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-server-element', templateUrl: './server-element.component.html', styleUrls: ['./server-element.component.css'] }) export class ServerElementComponent implements OnInit { @Input() public element: { type: string; name: string; content: string; } | undefined; constructor() { } ngOnInit(): void { } }