Не могу просмотерть отдельный продукт?

Question

[danila_prokopenko]

Начал изучать ангуляр, делал по первому тутор.
Если я нажимаю на продукт, чтобы его просмотреть, у меня не находится его id
product.ts

export const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

product-list.component

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + productId+ ' details'" [routerLink]="['/products', productId]">
      {{ product.name }}
    </a>
  </h3>
  <p *ngIf="product.description">
    {{product.description}}
  </p>
  <button (click)="share()">
    Share
  </button>

  <app-product-alerts [product]="product" (notify)="onNotify()">
  </app-product-alerts>

</div>

product-list.component.ts

import { Component } from '@angular/core';

import { products } from '../products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = products;

  share() {
    window.alert('The product has been shared!');
  }

  onNotify() {
    window.alert('You will be notified when the product goes on sale');
  }
}

product-details.component.ts

import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

import { products } from '../products';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
  product;
  // @Input() product: product;

  constructor(
    private route: ActivatedRoute,
    private cartService: CartService
  ) {}

  addToCart(product) {
    this.cartService.addToCart(product);
    window.alert('Your product has been added to the cart!');
  }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.product = products[+params.get('productId')];
    });
  }
}

product-details.component.html

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>

  <button (click)="addToCart(product)">Buy</button>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { CartService } from './cart.service';
import { CartComponent } from './cart/cart.component';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      {
        path: 'products/:productId',
        component: ProductDetailsComponent
      },
      { path: 'cart', component: CartComponent }
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent,
    CartComponent
  ],
  bootstrap: [AppComponent],
  providers: [CartService]
})
export class AppModule {}

почему у меня productId undefined и как это исправить?

Comments

[Andrew]

В массиве продуктов у каждого обьекта у вас нет productId...

[danila_prokopenko]

Если я буду вот так передовать ссылку, будет нормально?

<a [title]="product.name + ' ' + product.productId" [routerLink]="['/products', product.productId - 1]">
      {{ product.name }} <br>
      productId -{{product.productId}}
    </a>

только вопрос, почему, если в строке url выбор идет по дефолтному id элемента массива, а на странице выходит id,которе мы присвоили?

в браузере все корректно работет

[danila_prokopenko]

все, исправил, всем спасибо)

[Антон Швец]

я конечно все понимаю, но заголовок то без ошибок можно хоть написать?

Answer 1

[Pavel Shvedov]

используемый в product-list.component.html для построения ссылки на детали продукта productId откуда должен взяться? где он объявляется?

Comments

[danila_prokopenko]

сам не пойму, делал все по тутору, там он нигде не объявляется. Объявить его в массиве продуктов?

export const products = [
  {
    productId: 1,
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    productId: 2,
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    productId: 3,
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

[danila_prokopenko]

все, исправил, спасибо)

Answer 2

[Vitaliy Rasti]

Вам нужно в массив с товарами добавить поле productId. Оно у вас нигде не объявлено, а вы на него ссылаетесь, поэтому получаете undefined.

export const products = [
  {
    productId: 1
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    productId: 2
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    productId: 3
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

Comments

[danila_prokopenko]

да, уже допер, все сделал)