“错误TypeError：无法读取未定义的属性'name'” Angular

Posted 2023-02-17

我不确定我在这里做错了什么。在用户登录仪表板的工具栏后尝试显示用户名，但是当尝试调用我创建的名为UserDetails的界面时，浏览器控制台显示UserDetails的名称未定义。我确保从其他文件导入了UserDetails。

我在这里有我的组件ts文件

import  Component, OnInit  from "@angular/core";
import 
  BreakpointObserver,
  BreakpointState,
  Breakpoints
 from "@angular/cdk/layout";
import  Observable  from "rxjs";
import 
  AuthenticationService,
  UserDetails
 from "../auth/authentication.service";

@Component(
  templateUrl: "./portal.component.html",
  styleUrls: ["./portal.component.scss"]
)
export class PortalComponent 
  details: UserDetails;

  isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(
    Breakpoints.Handset
  );
  constructor(
    private breakpointObserver: BreakpointObserver,
    private auth: AuthenticationService
  ) 

  ngOnInit() 
    this.auth.profile().subscribe(
      user => 
        this.details = user;
      ,
      err => 
        console.error(err);
      
    );
  

和我的组件模板在这里

<mat-sidenav-container>
  <mat-sidenav
    #drawer
    mode="side"
    opened
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches"
  >
    <span><h1>Maersk</h1></span>
    <mat-divider></mat-divider>
    <mat-nav-list>
      <ul>
        <li>
          <a routerLink="/portal/dashboard">
            <button mat-flat-button color="accent">
              DASHBOARD
            </button>
          </a>
        </li>
        <li>
          <a routerLink="/portal/orders">
            <button mat-flat-button color="accent">
              ORDERS
            </button>
          </a>
        </li>
        <li>
          <a routerLink="/portal/stats">
            <button mat-flat-button color="accent">
              STATISTICS
            </button>
          </a>
        </li>
      </ul>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <mat-toolbar-row>
        <button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()"
          *ngIf="(isHandset | async)!.matches"
        >
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span class="right-align"></span>
        <button mat-button [matMenuTriggerFor]="menu">
           details.name 
        </button>
        <mat-menu #menu="matMenu">
          <a (click)="auth.logout()">
            <button mat-menu-item>
              LOGOUT
            </button>
          </a>
        </mat-menu>
      </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

控制台不断吐出“错误TypeError：无法读取未定义的属性'名称'”。不知道为什么在ts文件中找不到详细信息。

---

更新：

发现详细信息本身未定义后，发布了更多代码。这是我从authentication.service.ts对profile（）的调用

public profile(): Observable<any> 
    return this.request("get", "profile");
  

然后是request（），它在profile（）中被调用

private request(
    method: "post" | "get",
    type: "login" | "register" | "profile",
    user?: TokenPayload
  ): Observable<any> 
    let base;

    if (method === "post") 
      base = this.http.post("http://localhost:3000" + `/api/$type`, user);
     else 
      base = this.http.get("http://localhost:3000" + `/api/$type`, 
        headers:  Authorization: `Bearer $this.getToken()` 
      );
    

    const request = base.pipe(
      map((data: TokenResponse) => 
        if (data.token) 
          this.saveToken(data.token);
        
        return data;
      )
    );

    return request;
  

另外，以防万一，这里还有一些在request（）中被调用的方法

private saveToken(token: string): void 
    localStorage.setItem("mean-token", token);
    this.token = token;
  

  private getToken(): string 
    if (!this.token) 
      this.token = localStorage.getItem("mean-token");
    
    return this.token;
  

登录用户时，这里的一切工作正常。

答案

使用如下所示的在按钮内部（显示名称的地方）使用安全的导航操作符，

<button mat-button [matMenuTriggerFor]="menu">
     details?.name 
</button>