如何在 Angular 中使用 *ngFor 填充响应对象数组数据中的值答案

【问题标题】：How to populate the values in a response object array data using *ngFor in Angular如何在 Angular 中使用 *ngFor 填充响应对象数组数据中的值
【发布时间】：2020-06-30 05:40:09
【问题描述】：

我想使用 *ngFor 在 Angular 中显示来自后端 Api 的数据。但是数据作为包含大小为 10 的数组的对象出现。这是后端响应的图像，显示在 console.log(hotels);

这是我在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]);
            }
         });
      }

这是我写在component.html文件中的代码

<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

【问题讨论】：

hotelInfo和hotelInfo2的作用是什么？
@Mridul hotelInfo @hotelInfo2 是数组。我正在尝试将 console.log 作为数组获取
你为什么要运行for循环？
您只需要显示响应的结果，无论其大小如何？
它以对象的形式出现。*ngFor 中只允许使用数组

标签： arrays angular spring typescript object

【解决方案1】：

试试这个方法。您的响应是一个对象，它包含一个带有键 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;
         });
      }

现在在 hotelInfo 上运行 ngFor。它应该按照您的回复工作。

例子：

let obj = {
      responseObj: [
        { name: 'a' },
        { name: 'b' },
        { name: 'c' }
      ]
    };
    
    console.log(obj.responseObj);

【讨论】：

太棒了。乐于助人:)。

【解决方案2】：

您可以在角度中使用 keyValue 管道

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

【讨论】：