在异步操作返回值之前，如何防止构造函数中的进一步步骤

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 是由异步请求实例化的，我无法这样做，我该如何解决这个问题。由于异步请求，if(this.product2) 块的代码永远不会执行。

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;      });