javascript - 即使在 subscribe() 函数中为其分配数据后，变量数据也不会保留以绑定(bind)在 HTML 中

Question

我下面的 app-product.ts 代码如下:

@Component({
   selector: 'app-product',
   template: `
    <div>
      <h2>{{products.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{products.prod_desc}}</div>
    </div>`
 })

export class ProductComponent {

   products:any = [];

   constructor(public rest: RestService){ this.getProducts() }

   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}) => {
     console.log(data); // data is printing in console
      this.products = data; // tried keeping debugger here 
   });
}

在上面的代码中，我可以在控制台中打印数据，但是在我的模板中无法访问可变产品。我还尝试在该点保留调试器并尝试打印产品，但每次都显示为未定义。

下面是我使用 Http 客户端使用 REST API 的 Angular 服务文件，如下所示:

@Injectable({
  providedIn: 'root'
})

export class CarApiService {

  getProducts(): Observable<any> {
    return this.http.get(endpoint + 'products').pipe(
    map(this.extractData));
  }
}

我也尝试分析代码中是否存在任何回调问题，但无法找出导致此问题的真正原因。

我还尝试研究了一些主题，例如: component variables inside a RxJS subscribe() function are undefined但找不到任何帮助。谁能帮帮我？

Answer 1

由于该服务在其他模块中，我必须创建单个共享树来访问返回值。所以代码必须放在导出共享模块 block 中，如下所示:

static forRoot(): ModuleWithProviders {
return {
  ngModule: SharedModule
};