在Angular中加載頁面時出現“無法讀取未定義的屬性（讀取'id'）”錯誤-有解無憂

我正在從角度的 mockapi 服務中提取資料。我毫無問題地提取了所有資料，然后我嘗試使用串列中任何資料的 id 訪問資料的詳細資訊。我認為我想要所有資料的函式稍后運行，我得到了這個錯誤。

app.component.ts 檔案

export class AppComponent implements OnInit {
  
  data:Array<any>
  userData!: User;
  
  constructor(private task: TaskService) {
    this.data = new Array<any>();
  }
  
  ngOnInit(): void {
      this.runTask();
  }

  runTask() {
    this.task.getData().subscribe((data) =>{
      this.data = data;
    });
  }

  getUserData = (id: number) => {
    if (this.runTask == null) {
      return
    }
    this.task.getUserData(id).subscribe((res: User) => {
      console.log(res);
      this.userData = res;
    })
  }
}

export interface User{
  id: number,
  name: string,
  phone: number,
  website: string,
  company: any
}

任務.服務檔案

export class TaskService {

  readonly URL;

  constructor(private http: HttpClient) { 
    this.URL = "https://jsonplaceholder.typicode.com/users/"
  }

  getData(): Observable<any> {
    return this.http.get(this.URL);
  }

  getUserData(id: any) {
    return this.http.get<User>(this.URL id.id);
  }
}

截屏

第一次加載

當我點擊查看按鈕時，我想要的 id 中的資料就來了。打開一個模態，當我關閉模態時，會收到所有資料。

我一直在研究這個問題幾個小時，但找不到解決方案。

uj5u.com熱心網友回復：

id是組件中的數字，但它在服務中用作物件。如下更新您的服務

  getUserData(id: number) {
    return this.http.get<User>(this.URL   id);
  }

uj5u.com熱心網友回復：

您收到的錯誤（我在螢屏截圖中看到）來自第 90 行的模板檔案“app.component.html”。您似乎正在嘗試從未定義的變數（尚未加載的變數）中讀取 id （然而））。

確保它已定義，例如，您可以使用 'NgIf' 測驗變數是否真實，如下所示：

<div *ngIf="user">
  <span>{{user.id}}</span>&nbsp;
  <span>{{user.name}}</span>
</div>

為避免傳遞給方法的型別錯誤（如Roy Christo 發現的型別），請盡量不要使用 'any' 關鍵字。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/433929.html

標籤：有角度的前端

上一篇：從@typeform/embedcreateWidgetonSubmit回呼中訪問角度服務

下一篇：為前12名創建角度條件