Angular 从属性列表转到属性详细信息页面以显示未找到的选定属性404的详细信息

我正在使用

httpClient

从本地

json

文件检索数据。在

属性列表中，一切正常。单击某个属性时，我希望转到新页面，并显示所选属性的详细信息。我看了无数的视频，读了很多指南，但我似乎无法理解

我相信这与路线、激活路线和参数有关。我已经创建了页面和服务，导入了
路由器
和
激活的外部
，注入了我的服务，并在路由模块中设置了
：id
路径

JSON的开始

{
    "property": [
        {
            "propertyID": "101552000007",
            "branchID": "1",
            "clientName": "Demo",
            "branchName": "Br",
            "department": "Sales",
            "referenceNumber": "10006",
            "addressName": "",
            "addressNumber": "87",
            "addressStreet": "Hackney Road",
            "address2": "",
            "address3": "London",
            "address4": "",
            "addressPostcode": "E2 8PP",
            "country": "United Kingdom",
        }
    ]        


待售页

<ion-col *ngFor="let property of propertyList.property; let i=index" size="6">


<ion-card  [routerLink]="['/read-post',property.propertyID]">

应用程序路由

{ path: 'read-post/:id', loadChildren: './read-post/read-post.module#ReadPostPageModule' },

当我在待售页面中单击某个属性时，它会导航到“”（这是json中的propertyID）

控制台日志

GET http://localhost:8100/assets/data/xx.json/101552000015 404 (Not Found)

您将参数传递到不正确的
json
文件，而是读取
json
文件，然后过滤数据以获得所需的属性

根据您在问题中发布的JSON数据检查以下代码

将
getProperty（）
和
ngOnInit（）
方法更改如下：


    getProperty(): Observable<IProperties[]> {
            return this.http.get<IProperties[]>('/assets/data/xx.json/');
    }


    ngOnInit() {
            let propertyID = this.route.snapshot.params['id'];
            this.saleService.getProperty().subscribe( data => {
                if(Boolean(data) && Boolean(data.property)){
                    let requiredValue = data.property.filter(ele => ele.propertyID === propertyID)[0];
                    console.log(requiredValue);
                }
            });
    }


getProperty（）：可观察{
返回此.http.get（'/assets/data/xx.json/'）；
}
恩戈尼尼特（）{
让propertyID=this.route.snapshot.params['id']；
this.saleService.getProperty（）.subscribe（数据=>{
if（布尔值（数据）和布尔值（数据属性））{
让requiredValue=data.property.filter（ele=>ele.propertyID===propertyID）[0]；
console.log（requiredValue）；
}
});
}
非常感谢。除了我自己的json数据外，我一直在关注Youtube视频，所以有点困惑。你能不能给我指出正确的方向，我应该为此阅读哪些文档？作为那里的一些代码，我甚至不明白我是否诚实。另外，很抱歉问了另一个问题，但是我如何在html文件中显示数据？我还会使用字符串插值吗？再次感谢
GET http://localhost:8100/assets/data/xx.json/101552000015 404 (Not Found)


    getProperty(): Observable<IProperties[]> {
            return this.http.get<IProperties[]>('/assets/data/xx.json/');
    }


    ngOnInit() {
            let propertyID = this.route.snapshot.params['id'];
            this.saleService.getProperty().subscribe( data => {
                if(Boolean(data) && Boolean(data.property)){
                    let requiredValue = data.property.filter(ele => ele.propertyID === propertyID)[0];
                    console.log(requiredValue);
                }
            });
    }