Как я могу предотвратить дальнейшие шаги в конструкторе, пока asyn c операция не возвращает значение

Question

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

  categories$;
  product:Product = {category:"", price:0, imageUrl:"",title:""};
  product2;
  id;


  constructor(
    private router:Router,
    categoryService:CategoryService, 
    private productService:ProductService,
    private route:ActivatedRoute) { 

    this.categories$ = categoryService.getCategories().snapshotChanges();
    this.id = this.route.snapshot.paramMap.get('id');

    if(this.id) {

      this.productService
      .getOneProduct(this.id)
      .snapshotChanges()
      .pipe( take(1) )
      .subscribe( p => this.product2 = p.payload.val());

      if(this.product2){

        this.product.category = this.product2.category;
        this.product.price = this.product2.price;
        this.product.imageUrl = this.product2.imageUrl;
        this.product.title = this.product2.title;
      }

    }




export interface Product{

    price:number;
    title:string;
    category:string;
    imageUrl:string;
}

Я хочу создать экземпляр product.title, product.category и т. Д., Но так как product2 создается по асинхронному запросу c, я не могу это сделать, как я могу решить эту проблему. Код блока if (this.product2) никогда не выполняется из-за асинхронного запроса c.

Answer 1

Переместить код внутри подписки.

this.productService
      .getOneProduct(this.id)
      .snapshotChanges()
      .pipe( take(1) )
      .subscribe( p => { 
            this.product2 = p.payload.val();
            // no more if check needed I assume
            this.product.category = this.product2.category;
            this.product.price = this.product2.price;
            this.product.imageUrl = this.product2.imageUrl;
            this.product.title = this.product2.title;
      });