无法在Angular中从组件访问数据到html答案

【问题标题】：unable to access data from component to html in Angular无法在Angular中从组件访问数据到html
【发布时间】：2018-04-10 18:16:59
【问题描述】：

我正在使用 Observable.forkjoin 发送多个 http 请求并将结果存储在一个变量中，但我无法访问 html 中的结果。有没有人可以帮忙。

Service.ts：

addedProductIdArray : string[] =[];
reqs = [];

constructor(private _http: Http){};

getAddedProducts()  {
    for(var i = 0; i < this.addedProductIdArray.length; i++){
      this.reqs.push(this._http.get("https://my-json-server.typicode.com/shopping-cart/"+this.addedProductIdArray[i])
      .map((res: any) => res.json()));
    }
    return Observable.forkJoin(this.reqs);
  }

组件.ts

products : IProduct[];

  constructor(private _cartService : CartService) {
    this._cartService.getAddedProducts().subscribe((data: IProduct[]) => {
      this.products = data;
    });
  };

组件.html：

<ng-container *ngFor="let product of products">
    <a>{{product.title}}</a>
</ng-container>

我的 html 中的 product.title 为空。请帮忙

【问题讨论】：

您是否在组件中登录了this.products？看到里面的数据了吗？
是的，它返回所需的数组
@AnshumanJaiswal 你可以在这里看到输出 - 08b11a0437.stackblitz.io/products 请将一两个产品添加到购物车，然后从主导航转到购物车页面并查看 console.log。您可以看到显示的是静态数据，但没有显示“产品”数据
@AnshumanJaiswal 即使在删除地图后我也得到了相同的输出
谢谢@AnshumanJaiswal 我更喜欢使用地图选项

标签： angular observable fork-join

【解决方案1】：

在检查您共享 URL 中的响应时，我发现它没有正确解析，因为您使用的是 map

当前的响应类似于：

headers:Headers {_headers: Map(4), _normalizedNames: Map(4)}
ok:true
status:200
statusText:"OK"
type:2
url:"https://my-json-server.typicode.com/AnifaMd/shopping-cart/ec1040"
_body:"[↵  {↵    "title": "Common Projects Bball High ",↵    "id": "ec1040",↵    "color": "White",↵    "price": 540,↵    "availability": "Available"↵  }↵]"

应该是这样的：

[
    {
        "title": "Common Projects Bball High ",
        "id": "ec1040",
        "color": "White",
        "price": 540,
        "availability": "Available"
    }
]

response 是数组的数组，所以你必须通过以下方式修改它：

this._cartService.getAddedProducts().subscribe((data) => {
  this.products = data.map(item => item[0]);
});

这会起作用。

【讨论】：

即使删除地图后，我也得到相同的输出

【解决方案2】：

service.ts 和component.ts 中的函数没有问题。您收到如下响应。

[
    [{
        "title": "Common Projects Bball High ",
        "id": "ec1040",
        "color": "White",
        "price": 540,
        "availability": "Available"
    }],
    [{
        "title": "Maison Margiela Future Sneakers",
        "id": "ec1041",
        "color": "White",
        "price": 870,
        "availability": "Out of stock"
    }],
    [{
        "title": "Our Legacy Brushed Scarf",
        "id": "ec1042",
        "color": "Brown",
        "price": 349,
        "availability": "Available"
    }]
]

因此你必须稍微改变一下component.html，如下所示。

<ng-container *ngFor="let product of products">
    <ng-container>
      <div class="col-lg-4 col-md-6 mb-4" *ngFor="let item of product">
          <div class="card h-100">
              <div class="card-body">
                  <h4 class="card-title">
                      <a>{{item.title}}</a>
                  </h4>
                  <h5>{{item.price | currency:'INR'}}</h5>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
              </div>
              <div class="card-footer">
                  {{item.availability }}
              </div>
          </div>
      </div>
    </ng-container>
</ng-container>

我希望这能解决您的问题。如果您仍有问题，请告诉我。

【讨论】：