无法从组件访问数据到 Angular 中的 html

Question

我正在使用 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);
  }

Component.ts

products : IProduct[];

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

Component.html :

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

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

Answer 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]);
});

这会起作用。

Answer 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>

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

无法从组件访问数据到 Angular 中的 html

unable to access data from component to html in Angular

fork-join

observable

angular