在 Angular 中使用安全导航传递整个数据

Question

我正在将项目（数据）传递给是否显示某个视图。但是，当我刷新页面时，它会破坏页面。这 div 有效 <p class="admin">{{ project?.name }}</p>。但是在代码下方，当我单击刷新时会产生错误。当我单击刷新时，错误是 Cannot read 属性 'material_projects' of undefined 。我如何在这个 *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

由于存在 project 可能未定义的可能性，getProjectType 函数应考虑到这一点：

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

这个条件也可以移到ngIf:

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

或者可以向父元素添加额外的 ngIf；如果有 none 则可以使用 ng-container 代替：

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

在 Angular 中使用安全导航传递整个数据

Passing Whole Data Using Safe Navigation in Angular

angular

typescript

angular-ng-if

safe-navigation-operator