Question

我将项目（数据）传递给是否显示某个视图。然而，当我刷新页面时，它会破坏页面。这个div工作<p class="admin">{{ project?.name }}</p>。但是在代码下面，单击刷新时会产生错误。错误是无法读取属性＆＃39; material_projects＆＃39;当我点击刷新时未定义。如何在此*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添加到父元素;如果没有，则可以使用ng-container代替：

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

利用角度安全导航传递全数据

1 个答案: