即使在 subscribe() 函数中为其分配数据后，变量数据也不会保留在 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 
   });
}

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

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

@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

您正在尝试在模板 (*ngIf="product") 中使用 product，而数据位于 products 变量中。

并且，您应该调用 getProducts() 函数来获取数组变量中的值。

导入OnInit接口并调用函数：

export class ProductComponent implements OnInit {

   products:any = [];

   constructor(public rest: RestService){}

   ngOnInit() {
          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 
   });
}

更新到期评论

如果你想在你的模板中显示数组，你必须遍历数组：

template: `
    <div *ngFor='let product of products'>
      <h2>{{product.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{product.prod_desc}}</div>
    </div>`

Answer 2

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

export class ProductComponent {

   products:{}[] = [];

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

   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}[]) => {
     this.products = data;
     console.log(this.products); // this should not be undifind
   });
}

否则检查你的拼写

Answer 3

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

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

}

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

Variable data not retained to bind in HTML even after assigning data to it inside a subscribe() function

javascript

rxjs

typescript

angular

angular4-httpclient

更新到期评论