使用引數路由Angular時，陣列在子組件中顯示為未定義

簡而言之，我在這里嘗試做的是在導航到 /jobs/:id 時在子組件中顯示作業陣列的特定專案的某些屬性

子組件

export class HomeComponent implements OnInit {

  public jobs!: JobInterface[]

  constructor(
    private jobsService: JobsService
  ) {
  }

  ngOnInit() {
    this.getJobs()
  }


  getJobs(page = 1, filters = {city: 'Rome, Italy', level: ''}): void {
    this.jobsService.getJobs(page, filters)
      .subscribe((response) => {
        this.jobs = response.results.map(job => ({
            id: job.id,
            contents: job.contents,
            name: job.name,
            publication_date: job.publication_date,
            locations: job.locations,
            levels: job.levels,
            company: job.company

          })
        )
      })
  }

}

一切都在路由透視圖上作業，但在子組件中，作業陣列顯示為未定義，使我無法獲得所需的專案：

子組件

export class JobDetailsComponent implements OnInit {
  jobId : any
  @Input() jobs! : JobInterface[]
  selectedJob : any
  constructor(private ActivatedRoute : ActivatedRoute) { }

  ngOnInit(): void {
    this.jobId = this.ActivatedRoute.snapshot.paramMap.get('id')
    console.log(this.jobs)
    this.selectedJob = this.jobs.filter(this.jobId)

  }

}

子組件的 HTML

<app-search-bar (OutputFilters)="getFilteredResults($event)" ></app-search-bar>
<app-job-cards [jobs]="jobs"></app-job-cards>
<app-job-details [jobs]="jobs"></app-job-details>

這樣做的正確方法是什么？我在這里做錯了什么？

uj5u.com熱心網友回復：

好吧，因為路線改變了，所以沒有jobs或job在job-details。此外，組件在檢索資料之前呈現。

當資料準備好時，您可以添加一個標志來渲染組件，然后您可以將job-details組件移動到組件，并通過路由器從那里job-cards傳遞一個，如下所示：job

• 當資料準備好時，添加一個標志來渲染組件：

export class HomeComponent implements OnInit {
  dataReady:boolean = false;

// add after the response..
this.dataReady = true;

并在模板中：

<app-job-cards *ngIf="dataReady" [jobs]="jobs"></app-job-cards>

接著：

• 從app-job-details_home-component

通過模板傳遞job給job-details組件：routerjob-cards

<a mat-stroked-button routerLink="jobs/{{job.id}}" [state]="job">See More</a>

然后在job-details組件中通過historyAPI 使用它：

ngOnInit(): void {
    this.selectedJob = window.history.state;
}

但這是一種不好的方法，直接訪問時路由也會是空的..您應該決定如何處理..

更好的方法是存盤jobsinjobs-service而不是home-component并通過父/子傳遞它們，這將在組件之間共享，并添加getJobs和獲取或獲取作業的方法，或者為組件getJobDetails查找（而不是過濾）單個作業（job-details如果您希望詳細資訊頁面始終包含一些資料，則可能會獲取單個作業），這需要進行很多重構..

編輯：共享服務資料：

將處理從家庭組件轉移到作業服務。在那里，結合 fetch 和 processing 方法，如果沒有任何作業，則獲取作業，否則回傳作業，作為 Observable。然后，訂閱該方法以從每個組件中獲取作業。

嘗試：

• 作業服務

getJobs(): Observable <JobInterface[]> {

  if (!this.jobs) {
    return new Observable(observer => {

      this.fetchJobs()
        .subscribe((response) => {
          observer.next(response);
        });
    });

  }

  return of(this.jobs);

}


  fetchJobs(page = 1, filters = {city: 'Rome, Italy', level: ''}): Observable<JobInterface[]>{

    const params = new HttpParams({encoder: new CustomHttpParamsEncoder()})
      .set('category', 'Science and Engineering')
      .set('page', page)
      .set('location', filters.city)
      .set('level', filters.level)

    return new Observable(observer => {

      this.http.get<APIResponseInterface>(this.url, {params})
      .subscribe((response) => {

          this.jobs = response.results.map(job => ({
            id: job.id,
            contents: job.contents,
            name: job.name,
            publication_date: job.publication_date,
            locations: job.locations,
            levels: job.levels,
            company: job.company
          }))

          observer.next(this.jobs);
        });
    });
  }

• 家庭組件

getJobs(): void {

  this.jobsService.getJobs().subscribe((jobs: JobInterface[]) => {

    this.jobs = jobs;
    this.dataReady = true;

  });
}

• 作業細節組件

ngOnInit(): void {

this.jobId = this.ActivatedRoute.snapshot.paramMap.get('id')

this.jobsService.getJobs().subscribe((jobs:JobInterface[]) => {

  this.selectedJob = jobs.find(job=> job.id == this.jobId);
  });
}  

然后過濾器方法將呼叫jobsService.fetchJobs直接呼叫，它會同時修改作業。

看看這個例子

如何在組件之間共享來自 http 回應的資料？

還在這里檢查其他解決方案

標籤：有角度的打字稿网络

上一篇：Laravel唯一驗證多于一個規則

下一篇：當除錯為false時在django中請求媒體檔案