Angular 2 - 从数组中获取对象 ID 并显示数据答案

【问题标题】：Angular 2 - Getting object id from array and displaying dataAngular 2 - 从数组中获取对象 ID 并显示数据
【发布时间】：2018-08-30 09:03:30
【问题描述】：

我目前有一项服务，它从显示潜在客户列表的 json 文件中获取 json 对象数组。每个潜在客户都有一个 id，当单击此列表中的潜在客户时，它会将用户带到在 url 中具有此 id 的视图，即 (/lead/156af71250a941ccbdd65f73e5af2e67)

我一直试图通过我的潜在客户服务通过 id 获取此对象，但无法使其正常工作。我哪里错了？

另外，我在我的 html 中使用了两种方式绑定。

服务

  leads;

  constructor(private http: HttpClient) { }

  getAllLeads() {
    return this.http.get('../../assets/leads.json').map((response) => response);
  }

  getLead(id: any) {
    const leads = this.getAllLeads();
    const lead = this.leads.find(order => order.id === id);
    return lead;
  }

组件

  lead = {};

  constructor(
    private leadService: LeadService,
    private route: ActivatedRoute) {

      const id = this.route.snapshot.paramMap.get('id');
      if (id) { this.leadService.getLead(id).take(1).subscribe(lead => this.lead = lead); }

   }

JSON

[
  {
    "LeadId": "156af71250a941ccbdd65f73e5af2e66",
    "LeadTime": "2016-03-04T10:53:05+00:00",
    "SourceUserName": "Fred Dibnah",
    "LeadNumber": "1603041053",
  },
  {
    "LeadId": "156af71250a999ccbdd65f73e5af2e67",
    "LeadTime": "2016-03-04T10:53:05+00:00",
    "SourceUserName": "Harry Dibnah",
    "LeadNumber": "1603021053",
  },
  {
    "LeadId": "156af71250a999ccbdd65f73e5af2e68",
    "LeadTime": "2016-03-04T10:53:05+00:00",
    "SourceUserName": "John Doe",
    "LeadNumber": "1603021053",
  }
]

【问题讨论】：

标签： json angular typescript object

【解决方案1】：

你没有使用新创建的leads数组（const leads不是this.leads），所以这样做：

getLead(id: any) {
    return this.getAllLeads().find(order => order.LeadId === id);
}

并将您的 map 更改为 flatMap，因为您从服务器获得了一个数组，但您必须将其转换为它的项目流：

getAllLeads() {
    return this.http.get('../../assets/leads.json').flatMap(data => data);
}

如果需要，不要忘记导入它：import 'rxjs/add/operator/flatMap';

【讨论】：

我收到错误“Observable
@DBoi 你必须导入find:import 'rxjs/add/operator/find';
谢谢罗兰。我现在在第一个 'id' 上遇到此错误 - 即使我的 ILead 模型有一个 id:string;
@DBoi 即使你的ILead 模型有id，你确定对象有吗？在您的 JSON 文件中，您有 LeadId。试试这个：order.LeadId === id。如果这不是问题，请尝试记录您的对象以检查它有什么问题。
那行得通。非常感谢您花时间提供帮助 - 非常感谢。还学到了一些新东西——mergeMap！

【解决方案2】：

您可以在组件级别本身中使用 getLead，因为您没有制作任何 api 来获取信息。在您的组件中，

this.lead = this.leads.find(order => order.id === id);

或者要使上述服务正常工作，只需执行 leads 而不是 this.leads

 const lead = leads.find(order => order.id === id);

【讨论】：

我得到错误属性 'find' does not exist on type 'Observable
在我的 getAllLeads 函数中？
你指的是我的 JSON 设置吗？