时间戳

首页 > 解决方案 > 从属性列表转到属性详细信息页面以显示所选属性的详细信息 404 未找到

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

问题描述

我正在使用httpClient从本地json文件中检索数据。一切都在propertylist. 当我单击一个属性时，我想转到一个新页面，并显示所选属性的详细信息。我看过无数的视频，阅读了很多指南，但我似乎无法理解。

我相信它与路由、激活的路由和参数有关。我已经创建了页面、服务、导入了routerandactivatedrouter并注入了我的服务，并: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]">

服务

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

阅读后页面

    ngOnInit() {
        let propertyID = this.route.snapshot.params['id'];
        this.saleService.getProperty(propertyID).subscribe((property) => {
            console.log(property);
        });
    }

应用路由

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

当我在待售页面中单击一个属性时，它会导航到“ http://localhost:8100/read-post/101552000015 ”（这是 json 中的 propertyID）

控制台日志

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

标签： angulartypescriptionic-framework

解决方案

您将参数传递给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);
                }
            });
    }

推荐阅读