Как отправить список значений по одному для вызова одного метода

Question

Здесь я получаю следующие динамические данные с сервера

{
"Data": [
{
"LocationId": 6,
"LocationName": "J",
},
{
"LocationId": 3,
"LocationName": "M",

},
{
"LocationId": 2,
"LocationName": "P",
},
{
"LocationId": 5,
"LocationName": "B",
},
{
"LocationId": 4,
"LocationName": "D",

}
],
"ErrorCode": "201 - Success",
"Message": "Success",
"Status": true
}

и с помощью вышеуказанных данных я зацикливаюсь в шаблоне и динамически отображаю его в div

<div class="card"  *ngFor="let location of locationsName">
  <div class="card-body">
    <h5 class="card-title">{{location.LocationName |uppercase}}</h5>
    <h5 class="card-title" hidden>{{location.LocationId}}</h5>

  </div>

здесь моя проблема заключается в использовании значений locationids, как я могу вызвать другой сервис / метод, здесь у меня есть 1,2,4,5,6 в качестве locationids. В приведенном ниже сервисе я должен отправить только 1 параметр, поэтому за один раз, как я могу отправить все значения и получить результат и отобразить в том же div

this.serv.getOrder(this.locationId).subscribe(res=>{
      this.OrdersData = res.Data;

    });

Answer 1

Попробуйте этот код

locationsName: any;
locationData: any;
locationsNameNew: any = [];
constructor() {
    this.locationsName = [
        {
            "LocationId": 6,
            "LocationName": "J",
        },
        {
            "LocationId": 3,
            "LocationName": "M",

        },
        {
            "LocationId": 2,
            "LocationName": "P",
        },
        {
            "LocationId": 5,
            "LocationName": "B",
        },
        {
            "LocationId": 4,
            "LocationName": "D",

        }
    ]
}

ngOnInit() {
    for (let locationsNameObj of this.locationsName) {
        var newValue = this.method1(locationsNameObj.LocationId);  // The service method which you want to call
        this.locationData = {
            'LocationId': locationsNameObj.LocationId,
            'LocationName': locationsNameObj.LocationName,
            'newLocationId': newValue
        };
        this.locationsNameNew.push(this.locationData); // New response Object
    }
}

public method1(LocationId: any) {
    var LocationIdDummy = LocationId+1;   // the new values which u obtained in Service
    return LocationIdDummy;
}

HTML-код

<div class="card"  *ngFor="let location of locationsNameNew">
  <div class="card-body">
    <h5 class="card-title">{{location.LocationName |uppercase}}</h5>
    <h5 class="card-title" hidden>{{location.LocationId}}</h5>
    <h5 class="card-title">{{location.newLocationId}}</h5>

  </div>

Answer 2

Я согласен с предыдущим комментарием о плохой практике: ваш бэкэнд должен возвращать все необходимые данные для повышения производительности.

Однако, если вы не можете обновить серверную часть или у вас есть другие причины, которые подразумевают новые вызовы из пользовательского интерфейса, вы должны сначала выполнить цикл по массиву locationsName и на каждой итерации вызывать службу для извлечения данных. Затем добавьте его к текущему объекту итерации.

Передать отдельный объект массива locationsName службе:

for (var i = 0; i < this.locationsName.length; i++) {
   this.serv.getOrder(this.locationsName[i]).subscribe(res=>{
     // Here add new properties to objects
     this.locationsName[i]['OrdersData'] = res.Data;
   });
}

Элементы * ngFor будут обновляться после извлечения результатов из бэкэнда, поскольку угловые триггеры автоматически изменяют обнаружение.