Невозможно получить доступ к данным из компонента в HTML в Angular

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>

Я получаю product.title как пустой в моем HTML. Пожалуйста помоги

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"
    }
]

Ответ является массивом массивов, поэтому вы должны изменить его следующим образом:

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>

Я надеюсь, что это решит вашу проблему. Если у вас все еще есть проблемы, дайте мне знать.