Angular 如何使服务在第8章中获得所有者配置文件详细信息

我对JSON和Angular 8非常陌生

假设我已经创建了所有者列表，现在我单击公司的一位所有者以查看他的个人资料

如何在Angular 8中创建服务，以便使用JSON获取他的数据。

我的TS代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { CompaniesContentService } from 'src/app/home/companies-content.service';

@Component({
    selector: 'app-innovator-detail',
    templateUrl: './innovator-detail.component.html',
    styleUrls: ['./innovator-detail.component.scss'],
})

export class OwnerDetailComponent implements OnInit {
    OwnerId: any;
    selectedOwner: any;
    constructor(
        private route: ActivatedRoute,
        private contentService: CompaniesContentService
    ) { }
    ngOnInit() {
        this.route.paramMap.subscribe((params: ParamMap) => {
            let id = parseInt(params.get('id'));
            this.ownerId = id;
        });
        this.selectedOwner = this.contentService.getOwner(this.ownerId);
    }
}

在CompanyContentService中：

  getOwner(id: number) {
    this.companyContent.data.forEach((company) => {
      company.owner.forEach((owner) => {
        if (owner.id === id) {
          console.log('New D :', owner)
          return { ...owner}
        }
      })
    })
  }

我的HTML代码：

<ion-grid *ngFor="let owner of selectedOwner">
<ion-row>
    <ion-col size="12">
        <ion-item class="ion-no-margin ion-no-padding">
            <ion-label>
                {{selectedOwner.name}}
            </ion-label>
            <ion-icon name="information-circle" slot="end" color="medium"></ion-icon>
        </ion-item>
    </ion-col>
</ion-row>
<ion-card>
    <img src="../../assets/imgs/sergey-brin.webp">
    <ion-card-header>
        <ion-card-subtitle></ion-card-subtitle>
        <ion-card-title>Owner name here</ion-card-title>
    </ion-card-header>
    <ion-card-content class="ion-text-justify">
        Owner desc here
    </ion-card-content>
</ion-card>

}

---

提前感谢。

您可以在JSON数据中搜索所选所有者的姓名，并显示详细信息

应用程序组件.ts

app.component.html

所有者：
{{owner}}



选择所有者的详细信息



Id:{{selectedOwnerDetails.Id}}

名称：{{selectedOwnerDetails.Name}}

标签：{{selectedOwnerDetails.Label}}

Desc:{{selectedOwnerDetails.Desc}}

ImgUrl:{{selectedOwnerDetails.ImgUrl}}

---

有关更多详细信息，请参阅此处：

共享您的HTML和Ts文件代码。您好@Najam我现在有代码更新问题。谢谢@HimanshuSingh您的逻辑对我来说可以完美地在服务控制台中获得一个选定的所有者，但我一直无法从服务到组件中获得它。我希望在另一个组件（例如owner detail.component）中显示选定的所有者，其中显示选定的所有者未定义。请帮忙。

{
"data": [{
        "id": 1,
        "name": "Company one",
        "desc": "Comany Description",
        "icon": "iconPath",
        "logo": "logoPath",
        "country": "PK",
        "owners": [{
                "id": 1,
                "name": "Mr Riaz",
                "label": "owner",
                "desc": "Owner Desc here",
                "imgUrl": "imgPath"
            },
            {
                "id": 2,
                "name": "Mr Zain",
                "label": "owner",
                "desc": "Owner Desc here",
                "imgUrl": "imgPath"
            }

        ]
    },

    {
        "id": 2,
        "name": "Company two",
        "desc": "Comany Description",
        "icon": "iconPath",
        "logo": "logoPath",
        "country": "UAE",
        "Owners": [{
            "id": 4,
            "name": "Mr Yasir",
            "label": "owner",
            "desc": "Owner Desc here",
            "imgUrl": "imgPath"
        }]
    }
]

  ownersList = ["Mr Riaz", "Mr Zain", "Mr Yasir"];
  selectedOwner = "";
  selectedOwnerDetails = { id: 0, name: "", label: "", desc: "", imgUrl:""};
      
 changeHandler() {
            console.log(this.selectedOwner);
            this.ownersData.forEach((company)=>{
              company.owners.forEach((owner)=>{
                if(owner.name === this.selectedOwner){
                  this.selectedOwnerDetails = {...owner};
                }
              })
            })
          }

<label for="owner">Owners:</label>

<select name="owners" id="owner"  [(ngModel)]="selectedOwner" (change)="changeHandler()">
  <option *ngFor="let owner of ownersList" value={{owner}}>{{owner}}</option>
</select>

<br><br>

<u>Select Owner's details</u>
<br><br>
Id : {{selectedOwnerDetails.id}}<br>
Name : {{selectedOwnerDetails.name}}<br>
Label : {{selectedOwnerDetails.label}}<br>
Desc : {{selectedOwnerDetails.desc}}<br>
ImgUrl : {{selectedOwnerDetails.imgUrl}}<br>