0
   Здравствуйте!
Помогите, пожалуйста, разобраться с проблемой.
Есть такие компоненты приложения :
product-list.component.ts :
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router"
import { Product } from "../shared/product";
import { ProductService } from '../shared/product.service';

@Component({    
  selector: "product-list",
  templateUrl: "product-list.component.html",
  styleUrls: ["product-list.component.css"]
})
export class ProductListComponent implements OnInit {

  products: Product[] = [];

  constructor(private router: Router,
    private productService: ProductService) { }

  ngOnInit() {
    this.productService
        .getAll()
        .then(result => this.products = result);
}

onSelect(selected: Product) {         
    this.router.navigate(["product", selected.id]);
  }
}

product-details.component.ts :

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, Params } from "@angular/router";
import { Phrase } from "../shared/product";
import { PhraseService } from "../shared/product.service";

@Component({
    selector: "product-details",
    templateUrl: "product-details.component.html"
})
export class ProductDetailsComponent implements OnInit {

    product: Product = new Product();
    
    constructor(private router: Router,
        private activatedRoute: ActivatedRoute,
        private service: ProductService) { }

    ngOnInit() {        
        this.activatedRoute.params.forEach((params: Params) => {
            let id = +params["id"]; 
            this.service
                .getProduct(id)  
                .then(result => this.product = result); 
        });
        
    }

    goToProductsList() {
        this.router.navigate(["products"]);
    }
}

Сервис :
product.service.ts :

import { Injectable } from '@angular/core';
import { Product } from "./product";

let products = [
    new Product(1, "Product_1", "En"),
    new Product(2, "Product_2", "Spa"),
    new Product(3, "Product_3", "Uk"),
    new Product(4, "Product_4", "Fr")
];

let productsPromise = Promise.resolve(product);

@Injectable()
export class ProductService {

    getAll(): Promise<Product[]> {
        return productsPromise;
    }

    getProduct(id: number): Promise<Product | undefined> {
        return productsPromise
        .then(products => products.find(x => x.id == id));
    }
}

И класс :
product.ts :

export class Product {
    constructor(public id?: number,
        public value?: string,
        public language?: string) { }
}

Возникает ошибка при запуске приложения - **Error: 
src/app/product-details/product-details.component.ts:30:33 - 
error TS2322: Type 'Product | undefined' is not assignable 
to type 'Product'.
  Type 'undefined' is not assignable to type 'Product'.
30   .then(result => this.product = result);**

Если же я убираю undefined в этом методе в сервисе :
getProduct(id: number): Promise<Product | undefined> {
return productsPromise
.then(products => products.find(x => x.id == id));
}
- тогда прежняя ошибка пропадает, но появляется здесь на 
промисах - **Type 'Promise<Product | undefined>' is not 
assignable to type 'Promise<Product>'.
Type 'Product | undefined' is not assignable to type 
'Product'.
Type 'undefined' is not assignable to type 'Product'.**

Буду признателен за помощь!
2
  • Это не дубликат вопроса - проблема другая!
    – Anton
    23 июн 2021 в 12:31
  • От того что вы где-то раскрыли промис проблема принципиально не изменилась.
    – Alexey Ten
    23 июн 2021 в 13:18

2 ответа 2

0
onSelect(selected: Product | undefined) {         
  if (selected) {
    this.router.navigate(["product", selected.id]);
  }
}

То же самое с then:

then( (result: Product | undefined) => {
  if (result) {
      this.product = result); 
  }
}
0

Ошибка здесь :

ngOnInit() {      
  this.activatedRoute.params.forEach((params: 
  Params) => {
    let id = +params["id"]; 
    this.service
        .getProduct(id)  
        .then(result => this.product = 
    result); 
    });        
 }

 .then(result => this.product = result);

чертит! При чём здесь onSelect() ?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.