如何从列表组件中显示详细组件的数据？

Question

我无法将数据从一个组件显示到另一个组件。 我将我从服务中获取的数据放入 prova 并显示所有工作的列表。但我无法将“prova”上的数据传输到另一个组件，以通过它们自己的 id 显示详细信息。

这是我的 apicall 服务

import { Injectable } from '@angular/core';
import {HttpClient,HttpClientModule,HttpResponse} from '@angular/common/http';
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
import {results} from "./results"


@Injectable({
  providedIn: 'root'
})
export class GetApiService {

  constructor(
    private http:HttpClient,
  ) { }


  apiCall():Observable<results[]>
  {
    return this.http.get('https://www.themuse.com/api/public/jobs?category=Engineering&page=10')
    .pipe(map
    (
      (response:any) => {
        const data = response.results;
        console.log (data)
        return data ;
   
      }
    )
    );
   }
}

这是我观察到的结果

  export interface results
    {
  categories : any;
company: string;
contents:string;
id : number;
 levels:string;
 locations:string;
 model_type: string;
 name: string;
 refs: string;
 short_name: string;
 type:string;

  }

这是我的组件，其中有一个作品列表

import {results} from "../results";
import {GetApiService} from '../get-api.service';
import {switchMap} from "rxjs/operators";
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-work-list',
  templateUrl: './work-list.component.html',
  styleUrls: ['./work-list.component.css']
})
export class WorkListComponent implements OnInit {
   
  prova: results[]=[] ;
 item: any;
  selectedId: any ;
  constructor(
    private api :GetApiService,
    private route: ActivatedRoute,
  ) { }

  ngOnInit(){

    this.api.apiCall()
    .subscribe
      (
        (data:results[]) => {
          this.prova=data;
        console.log (data);

        });

}
}

以及通过 id 连接的相应 html

    <div *ngFor="let item of prova " 
    [class.selected]="item.id === selectedId">
                      
    <a
    [routerLink]="['/details',item.id]">
    <h1> {{ item.name }}</h1>
    </a>
    <h1> {{ item.id }}</h1>
    <h1> {{ item.categories[0].name }}</h1>
    <h1> {{ item.name }}</h1>

      </div>

这是我无法用自己的详细信息显示所选作品的详细信息

import { ActivatedRoute } from '@angular/router';
import {results}  from '../results';
import {GetApiService} from '../get-api.service';
import {switchMap} from "rxjs/operators";


@Component({
selector: 'app-work-details',
templateUrl: './work-details.component.html',
styleUrls: ['./work-details.component.css']
})
export class WorkDetailsComponent implements OnInit {
@Input()
item: {
  categories: any;
  company: string;
  contents: string;
  id: number;
  levels: string;
  locations: string;
  model_type: string;
  name: string;
  refs: string;
  short_name: string;
  type: string;
} | undefined;
@Input ()
prova: results[]=[];
selectedId:string | undefined;
constructor(
  private route: ActivatedRoute,
  private api: GetApiService,
) { }

ngOnInit():void {

   this.route.paramMap.subscribe
    (params => {
      this.item=this.prova[+params.get('selectedId')];

**// it should  be somewthing like this but prova is empty.**
      
    })
  ;
}
}

Answer 1

您似乎在混合使用两种不同的机制？

其中一个是父 -> 子组件关系，您的 WorkDetailsComponent 与 @Input() 对应于 prova，但同时，鉴于您的 <a [routerLink]="['/details',item.id]">，看起来该组件是它自己的页面以及this.route.paramMap.subscribe...的用法。

可以肯定的是，你不能同时拥有它。

您可以转到父组件 -> 子组件，在其中使用 @Input()s 传递相关详细信息：

<div *ngIf="selectedItem">
  <app-work-details [prova]="prova" [selectedItem]="selectedItem"></app-work-details>
</div>

或者您使用单独的页面路由，可以通过以下两种方式之一完成：

1. 将该服务用作共享服务；让它记住状态（prova），以便在详细信息页面加载时，它可以请求相关 id 的数据。

2. 通过路由参数传递附加数据

对于 1，它看起来像：

private prova: results[]; // Save request response to this as well

public getItem(id: number): results {
  return this.prova.find(x => x.id === id);
}

然后当您加载详细信息页面时：

ngOnInit():void {

   this.route.paramMap.subscribe
    (params => {
      this.selectedId=+params.get('selectedId');

   this.item = this.service.getItem(this.selectedId);
      
    });
}

对于 2，它涉及使用附加数据进行路由，如下所示：

<a [routerLink]="['/details',item.id]" [state]="{ data: {prova}}">..</a>

article 更详细地展示了在组件之间获取数据的各种方法。