Как заполнить значения в массиве данных объекта ответа, используя * ngFor in Angular - PullRequest
Новая
       71

Как заполнить значения в массиве данных объекта ответа, используя * ngFor in Angular

2 голосов
/ 19 марта 2020

Я хочу отобразить данные, поступающие от серверного API в Angular, используя * ngFor. Но данные поступают как объект, который содержит массив размером 10. Это изображение ответа сервера, которое отображается в console.log(hotels);

Это код angular, который я написал в файле component.ts 

   hotelInfo = [];
   hotelInfo2 = [];

    getTopHotelInfo() {
        const params = [];
        params.push({code: 'dateType', name: 'CHECKIN'});
        params.push({code: 'fromDate', name: '2018-01-01'});
        params.push({code: 'toDate', name: '2019-01-01'});
        params.push({code: 'topN', name: 10});
        this.dashboardServiceHandler.getTopHotelInfo([], params).subscribe(
          hotels => {
            console.log(hotels);
            this.hotelInfo.push(hotels);
            console.log(this.hotelInfo);
            for (let i = 0; i < this.hotelInfo.length; i++) {
                const hotel = this.hotelInfo[i];
                console.log(hotel);
                /// this.hotelInfo2.push(hotels[i]);
                this.hotelInfo2.push({code: hotel.code, name: hotel.name});
                console.log(this.hotelInfo2[i]);
            }
         });
      }

Это код, который я написал в компоненте. html file 

<li *ngFor="let hotel of hotelInfo">
        <div class="c-inbox-widget__item">
          <div class="c-inbox-widget__item__avatar" style="background: #A3A1FB">
            01
          </div>

            <div>
              <span class="c-inbox-widget__item__author">{{hotel.name}}</span>
              <!--<span class="c-inbox-widget__item__text">Canada</span>-->
            </div>

            <div class="c-inbox-widget__item__value">$29,193</div>

        </div>
   </li>

Как я могу получить эти данные в виде массива для * ngFor

Ответы [ 2 ]

2 голосов
/ 19 марта 2020

Попробуйте так. Ваш ответ является объектом и содержит массив с ключом responseObj. 

getTopHotelInfo() {
        const params = [];
        params.push({code: 'dateType', name: 'CHECKIN'});
        params.push({code: 'fromDate', name: '2018-01-01'});
        params.push({code: 'toDate', name: '2019-01-01'});
        params.push({code: 'topN', name: 10});
        this.dashboardServiceHandler.getTopHotelInfo([], params).subscribe(
          hotels => {
            console.log(hotels);
            this.hotelInfo = hotels.responseObj;
         });
      }

. Теперь запустите ngFor для hotelInfo. Это должно работать согласно вашему ответу.

Пример: 

let obj = {
      responseObj: [
        { name: 'a' },
        { name: 'b' },
        { name: 'c' }
      ]
    };
    
    console.log(obj.responseObj);
1 голос
/ 19 марта 2020

Вы можете использовать keyValue pipe в angular 

  <div *ngFor="let hotel of hotelInfo">
    <div *bgFor="let q of hotel | keyvalue>
           {{q.key}} - {{q.value}}
    </div>
  </div>
...