所以我正在嘗試使用 Angular 和 Spring Boot 建立一個在線商店，但我遇到了一個問題，每當我在ngOnInit中呼叫 productService 方法時，我都會在控制臺中收到以下錯誤
而不是路線：/products/product/:id我得到一個物件，但我不知道為什么會這樣。
基本上我想要做的是：我有一個產品串列，如果用戶點擊任何產品，將被重定向到包含有關該特定產品的一些資訊的新頁面。
這是代碼：
產品頁面.component.ts
export class ProductPageComponent implements OnInit {
constructor(public authenticationService: AuthenticationService, private route: ActivatedRoute, private productService: ProductServiceService) {
this.product = new Product();
}
product: Product;
productId;
ngOnInit(): void {
this.route.params.subscribe(data => {
this.productId = data['id'];
this.productService.findProductById(this.productId).subscribe(data => {
this.product = data;
console.log(data);
});
});
}
}
應用程式路由.module.ts
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'products', component: ProductsComponent, canActivate: [AuthenticationGuard]},
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{path: 'products/product/:id', component: ProductPageComponent},
{path: '', redirectTo:'home', pathMatch: 'full'}
];
該組件的路徑是products/product/:id
產品.service.ts
export class ProductServiceService {
url: string = environment.apiBaseUrl; //localhost:8080
constructor(private http: HttpClient) { }
getAllProducts() {
return this.http.get<Product[]>(`${this.url}/products`);
}
findProductById(productId: number) {
return this.http.get<Product>(`${this.http}/product/${productId}`);
}
}
uj5u.com熱心網友回復：
參考評論部分，解決方案是更改this.http為product.service.ts 的this.urlin line return this.http.get<Product>(`${this.http}/product/${productId}`);=> return this.http.get<Product>(`${this.url}/product/${productId}`);。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510420.html
標籤：有角度的打字稿http
上一篇：url中的角度面臨編碼問題
下一篇：打字稿從類引數的值中創建型別