Ошибка параметров запроса Angular 5
Я пытаюсь использовать query params в angular, который использует данные, предоставленные службой, и фильтрует продукты на странице магазина.
В моем магазине компонент -
ngOnInit() {
this.productList = this.productservice.getProducts();
this.activatedRoute.queryParams
.subscribe(queryParams => {
if (queryParams.type === 'jeans') {
let filteredProduct = this.productList.find(product=> product.productCat == 'Jeans');
console.info(filteredProduct);
} else if (queryParams.type === 'shirts') {
let filteredProduct = this.productList.find(product=> product.productCat == 'Shirts');
console.info(filteredProduct);
}
});
}
redirectPage(value){
this.router.navigate(['/shop' ,'value']);
this.activatedRoute.snapshot.paramMap.get('type');
}
В моем Другом компоненте. Предоставляю ссылку на роутер -
<a [routerLink] = "['/shop']" [queryParams] = "{ type: 'jeans'}" (click) = "redirectPage('jeans')">Jeans</a>
Я путь даю -
{path: 'shop/:type', component: ShopComponent},
Итак, когда щелкаем якорь, джинсы. Отображаемый URL-адрес - http://localhost:4200/shop?type=jeans, но я получаю сообщение об ошибке - Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shop'.
Я получаю правильные данные в журнале консоли для этой логики let filteredProduct = this.productList.find(product=> product.productCat == 'Jeans');, но я думаю, что есть некоторая ошибка, которую я делаю с параметрами запроса или путем.
В компоненте магазина я использовал *ngFor для категорий продуктов (productCat). Это вызывает проблему? -
<div class = "col-md-10 shop-products" *ngFor = "let prod of productList">
<div class = "shop-products-headline">
<h3>{{prod.productCat}}</h3>
</div>
<div class = "row shop-products-listing">
<div class = "col-md-4" *ngFor = "let product of prod.product">
<div class = "sp-list-inner">
<figure>
<a href = "#">
<img src = "{{product.productImage}}" alt = "{{product.productImageAlt}}">
<figcaption>
<h5 class = "product-inner-title">{{product.productName}}</h5>
<p class = "product-inner-price">
<span class = "new-price"><i class = "fa fa-inr" aria-hidden = "true"></i>{{product.newPrice}}</span>
<span class = "old-price"><i class = "fa fa-inr" aria-hidden = "true"></i>{{product.oldPrice}}</span>
<span class = "you-save">you save <i class = "fa fa-inr" aria-hidden = "true"></i>{{product.oldPrice - product.newPrice}}</span>
</p>
</figcaption>
</a>
</figure>
</div>
</div>
</div>
</div>
Нет, не думаю - <app-header></app-header> <app-categories></app-categories> <router-outlet></router-outlet> <app-footer></app-footer>
Ответы 2
Параметры запроса и путь - это две разные вещи. Путь - это, по сути, ваш URL-адрес, параметры запроса обычно добавляются после URL-адреса.
Typical URL containing a query string is as follows:
http://example.com/over/there?name=ferret
When a server receives a request for such a page, it may run a program, passing the query string, which in this case is, name=ferret unchanged, to the program. The question mark is used as a separator, and is not part of the query string.
from Wikipedia
Самое простое решение - изменить свой путь к {path: 'shop', component: ShopComponent},.
Если вы все еще хотите использовать путь, который используете сейчас, используйте параметры маршрута (не параметры запроса).
В вашем текущем случае вам следует сменить ссылку на routerLink на routerLink = "/shop/jeans", а затем получить данные от this.activatedRoute.params:
productListShow = [];
ngOnInit() {
this.productList = this.productservice.getProducts();
this.productListShow = this.productList;
this.activatedRoute.params
.subscribe(params => {
if (params.type === 'jeans') {
this.productListShow = this.productList.filter(product=> product.productCat == 'Jeans');
} else if (params.type === 'shirts') {
this.productListShow = this.productList.filter(product=> product.productCat == 'Shirts');
}
});
}
Используйте productListShow вместо productList в shop.html:
<div class = "col-md-10 shop-products" *ngFor = "let prod of productListShow">
Привет! Спасибо, но я получаю это сообщение об ошибке. Сообщение Cannot match any routes. URL Segment: 'shop/jeans'.
каков ваш путь к вашему модулю маршрутизации в этом случае? с какого URL вы переходите на эту страницу, попробуйте добавить перед ним '/', чтобы он превратился в '/ shop / jeans'
Я не привел их, но в старом случае {path: 'shop/:type', component: ShopComponent}, В журнале консоли я получаю желаемые данные. Я использую страницу компонентов "Повторение в магазине" для productCat <div class = "col-md-10 shop-products" *ngFor = "let prod of productList"> <div class = "shop-products-headline"> <h3>{{prod.productCat}}</h3> </div></div>. Может в этом проблема?
Привет, можно исправить что-то вроде этого - stackoverflow.com/questions/46185327/…
подождите, вы можете сначала решить проблему, с которой столкнулись с Cannot match any routes. URL Segment: 'shop/jeans'? Также я не думаю, что вам понадобится функция redirectPage в компоненте магазина и (click) = "redirectPage('jeans') в другом компоненте, они тоже так не используются.
Привет @Joshua, я удалил функцию (click) = "redirectPage('jeans') anf. И я использовал путь {path: 'shop/:type', component: ShopComponent}, для {path: 'shop', component: ShopComponent},. Я получал ошибку Cannot match any routes. URL Segment: 'shop/jeans'.
Хорошо, теперь в чем осталась проблема.
На странице магазина отображаются все данные (джинсы + рубашки), а не только джинсы. Данные не фильтруются. Но в консоли отображается только правильный массив джинсов.
о, сделайте свой filterProduct свойством в вашем компоненте и используйте его для своего * ngFor, если вам нужен нефильтрованный productList изначально, вы должны использовать частное свойство или локальную переменную для хранения исходного списка продуктов из службы и использовать другой общедоступный свойство, например, productListShow, чтобы перейти к списку продуктов, который вы хотите отображать динамически.
Привет @ Джошуа, спасибо, не могли бы вы показать мне, как? Это кажется немного сложным. Приносим извинения за беспокойство.
Я обновил ответ, включив в него необходимые фрагменты кода.
Привет! Я получаю небольшую ошибку для this.productListShow - Type 'Products' is not assignable to type 'any[]'.
this.productList.find, замените find на filter, чтобы он стал this.productList.filter
Используйте только метод (щелчок). Удалить [routerLink] = "['/ shop']" И в том же ts, на котором используется якорь, напишите этот код:
redirectPage(value){
this.router.navigate(['/shop' ,value]);
}
И на странице, на которую вы хотите перенаправить, напишите этот измененный код:
ngOnInit() {
this.productList = this.productservice.getProducts();
let type_value = this.activatedRoute.snapshot.paramMap.get('type');
if (type_value === 'jeans') {
let filteredProduct = this.productList.find(product=>
product.productCat == 'Jeans');
console.info(filteredProduct);
} else if (type_value === 'shirts') {
let filteredProduct = this.productList.find(product=>
product.productCat == 'Shirts');
console.info(filteredProduct);
}
}
Я надеюсь, что вы не пишете логику перенаправления и активированного маршрута для одного и того же компонента.
Привет, @Prachi, я получаю URL-адрес, подобный этому http://localhost:4200/shop/value, и данные на странице магазина не фильтруются. Пожалуйста помоги
Извините, пожалуйста, прочтите обновленный код. Используйте this.router.navigate (['/ shop', value]); вместо. Используйте значение как переменную, а не как строку.
Спасибо, все работает, но данные не фильтруются. Но в журнале консоли отображается желаемый результат. В моем компоненте магазина я зацикливаю данные. <div class = "col-md-10 shop-products" *ngFor = "let prod of productList"> <div class = "shop-products-headline"> <h3>{{prod.productCat}}</h3> </div></div>. Я предполагаю, что он будет фильтровать только определенную категорию продукта. Это вызывает проблему?
Привет, @Prachi, можешь исправить это примерно так - stackoverflow.com/questions/46185327/…
ты внутри какой-то вложенный
router-outlet?