Übergeben von ganzen Daten mit sicherer Navigation in Angular

Question

Ich übergebe Projekt (Daten), ob eine bestimmte Ansicht anzeigen. Es funktioniert jedoch, wenn ich die Seite die Seite aktualisiere, zerstört es die Seite. Dies funktioniert <p class="admin">{{ project?.name }}</p>. Unter den Codes erzeugt jedoch ein Fehler, wenn ich auf Aktualisieren klicke. Der Fehler ist nicht lesen Eigenschaft 'material_projects' von undefined, wenn ich auf Aktualisieren klicken. Wie gehe ich als sichere Navigation in diesem *ngIf="getProjectType(projects) === 'mat_exist'"

<p *ngIf="getProjectType(projects) === 'mat_exist'"> 
     <ngb-alert type="success"> 
     You Already Have An Existing Material/s On This Project. <br> 
     You Can Add More Material/s Below. 
     </ngb-alert> 
    </p> 
    <p *ngIf="getProjectType(projects) === 'service_exist'"> 
     <ngb-alert type="info"> 
     You Already Have An Existing Service/s On This Project. <br> 
     You Can Add More Service/s Below. 
     </ngb-alert> 
    </p> 

ts

ngOnInit() { 
     this.route.params 
      .subscribe((params: Params) => { 
      this.id = +params['id']; 
      this.projectsService = this.injector.get(ProjectsService); 
      this.projectsService.getProject(this.id) 
      .subscribe(
       (data:any) => { 
       this.projects = data; 
       console.log(data); 

       }, 
       error => { 
       alert("ERROR"); 
       }) 
      }); 
} 

ts

public getProjectType(project): 'mat_exist' | 'mat_new' | 'service_exist' | null { 
     return project.material_projects.length > 0 ? 'mat_exist' 
      : project.project_services.length > 0 ? 'service_exist' 
      : null; 
    } 

Answer 1

Da eine Möglichkeit besteht, dass project kann undefiniert sein sollte getProjectType Funktion berücksichtigt dies:

<p *ngIf="projects && getProjectType(projects) === 'mat_exist'"> 
... 

oder zusätzliche ngIf Mutterelement hinzugefügt werden;:

public getProjectType(project): 'mat_exist' | 'mat_new' | 'service_exist' | null { 
    if (!project) return null; 
    ... 
} 

Diese Bedingung kann alternativ zu ngIf bewegt werden Wenn es keine gibt, dann ng-container kann stattdessen verwendet werden:

<ng-container *ngIf="projects"> 
    <p *ngIf="getProjectType(projects) === 'mat_exist'"> 
    ...