docs: use an explicit product id in the getting started example (#34934)

Simplyfing the example by prodiving an id for each
product instead of relying on their index in the array.

Closes #34738

PR Close #34934
This commit is contained in:
Troels Lenda 2020-01-23 21:29:15 +01:00 committed by Joey Perrott
parent 475468cc8f
commit 362f45c4bf
5 changed files with 16 additions and 7 deletions

View File

@ -23,8 +23,11 @@ export class ProductDetailsComponent implements OnInit {
// #enddocregion props-methods
// #docregion get-product
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.product = products[+params.get('productId')];
// First get the product id from the current route.
const productIdFromRoute = this.route.snapshot.paramMap.get('productId');
// Find the product that correspond with the id provided in route.
this.product = products.find(product => {
return product.id === Number(productIdFromRoute);
});
// #docregion product-prop
}

View File

@ -30,8 +30,11 @@ export class ProductDetailsComponent implements OnInit {
// #docregion get-product
ngOnInit() {
// #enddocregion props-methods
this.route.paramMap.subscribe(params => {
this.product = products[+params.get('productId')];
// First get the product id from the current route.
const productIdFromRoute = this.route.snapshot.paramMap.get('productId');
// Find the product that correspond with the id provided in route.
this.product = products.find(product => {
return product.id === Number(productIdFromRoute);
});
// #docregion props-methods
}

View File

@ -1,10 +1,10 @@
<h2>Products</h2>
<!-- #docregion router-link -->
<div *ngFor="let product of products; index as productId">
<div *ngFor="let product of products">
<h3>
<a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
<a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
{{ product.name }}
</a>
</h3>

View File

@ -1,15 +1,18 @@
export const products = [
{
id: 1,
name: 'Phone XL',
price: 799,
description: 'A large phone with one of the best screens'
},
{
id: 2,
name: 'Phone Mini',
price: 699,
description: 'A great phone with one of the best cameras'
},
{
id: 3,
name: 'Phone Standard',
price: 299,
description: ''

View File

@ -31,7 +31,7 @@ This section shows you how to define a route to show individual product details.
1. Update the `*ngFor` directive to read as follows.
This statement instructs Angular to iterate over the items in the `products` array and assigns each index in the array to the `productId` variable when iterating over the list.
1. Modify the product name anchor to include a `routerLink`.
1. Modify the product name anchor to include a `routerLink` with the `product.id` as a parameter.
<code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.html" region="router-link">
</code-example>