Question

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

我认为这与路由，激活的路由和参数有关。我已经创建了页面，服务，导入了router和activatedrouter，并注入了我的服务，并在路由模块中设置了: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)

Answer 1

您正在将参数传递到不正确的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);
                }
            });
    }

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

1 个答案: