Question

我正在使用Angular反应形式。我想使用setvalue()用API中的值初始化表单，然后执行更新。我当前正在执行get请求以获取产品，然后将产品值设置为从中获取的数据我的服务。我可以通过将i传递给我的函数，然后将其传递给我的服务来通过其ID获得产品。我正在从本地主机获取所有数据，所以没有堆栈闪电，因为我看不到它将如何帮助。制作虚拟数据将花费很长时间。如果您需要了解任何内容，请在评论中让我知道。

我的update-product.ts中的功能：

selectedId(id){
this.id = id +1 ;

this.homeService.getProduct(this.id).subscribe(data => {
 this.product = data;
}); 
this.updateProduct.setValue({
 id: this.product.id,
 productName: this.product.productName,
 category: this.product.category.categoryName,
 fullPrice: this.product.fullPrice,
 salePrice: this.product.salePrice,
 availability: this.product.availability,
 supplier: this.product.supplier.supplierName,
 discount: this.product.discount
});

}

我的表单具有三元运算符，可以在编辑模式下跟踪想要的产品。但我注意到有一个延迟。在显示数据之前，我必须单击两次按钮。如果单击其他产品上的编辑模式，则会显示我选择的先前产品的产品信息。我相信这是我所在的位置，但我不确定。

当我单击第二个产品时，将显示第一个产品中的数据，我必须总共单击3次才能从当前产品中获取数据。

Answer 1

如果您不想使用ngrx，更好的方法是为您的editMode创建行为主题

editStarted = new BehaviorSubject（false）; editItemChanged = new BehaviorSubject（{}）;

在您的服务类中创建此目录，并在需要时订阅它。因此，一旦您的editStarted或editItemChanged通过在组件上调用next（）触发，便会得到通知，并且可以执行您想要执行的代码。

Answer 2

您的 setValue（）必须位于您的 subscribe（）内部，否则它将始终在 subscribe（）完成之前运行。

import React, { Component } from 'react';

class UserOutput extends Component
{
    render() {
        return(
            <div>
                <p>First paragraph and my name is {this.props.username}</p>
                <p>Second paragraph </p>
            </div>
        );
    }
}

export default UserOutput;

这可以解释为什么总是要进行两次尝试。如果不确定如何工作，请阅读以下内容： https://angular.io/guide/observables

如何在Angular 8中正确使用setValue

2 个答案: