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 Client使用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

当数据位于product变量中时，您正在尝试在模板（*ngIf="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

由于该服务位于其他模块中，因此我必须创建用于访问返回值的单个共享树。因此，必须将代码放置在导出共享模块块中，如下所示：

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

}

即使在subscribe（）函数中向其分配数据后，可变数据也不会保留以绑定到HTML

3 个答案:

更新适当的评论