角度，使用服务在数组中显示数组

Posted 2023-03-05

【中文标题】角度，使用服务在数组中显示数组

【英文标题】：Angular, display array in array using service

【发布时间】：2018-07-10 07:53:02

【问题描述】：

我像这样从 ws 获取所有数据 json：

  "StatusCode":0,
  "StatusMessage":"OK",
  "StatusDescription":   
   [
      "homeboxpackage_id":"1",
        "active":0,
        "homebox_id":"11",
        "serial_number":"serialn1",
        "user_id":"31", 
        "sensors":  
              "0":
                    "sensor_serial":"sensorserial1",
                    "sensors_id":"11E805BA6732C3DB"
              , 
              "1":
                    "sensor_serial":"sensorserial2", 
                    "sensors_id":"11E805BA6F1E6CE9"
              , 
              "2":
                    "sensor_serial":"sensorserial3", 
                    "sensors_id":"11E805BA7716C775"
              
        
    
  ]

在 html 代码中，我想在列表中显示数据传感器，但不显示。我的html代码：

  <table class="bordered table-bordered" [mfData]="homeboxsp | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
    [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
    <thead>
      <tr>
        <th>
          <mfDefaultSorter by="serial_number">Serial Number</mfDefaultSorter>
        </th>
        <th>
          <mfDefaultSorter by="sensors">Sensor Serial</mfDefaultSorter>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of homeboxsp">
        <td>item.serial_number</td>
        <ul>
          <li>item.sensors</li>
        </ul>
        <td>item.active</td>
     </tr>
    </tbody>
   </table>

homeboxsp 在 component.ts 中

 this.ws.homeboxPGetAll().subscribe(
      homeboxsp => 
        this.homeboxsp = homeboxsp; // in console display all my array in array
           
    );

image

[1]: https://i.stack.imgur.com/QxRTr.png

谢谢

【参考方案1】：

您需要另一个 ngFor 来循环传感器对象

<tr *ngFor="let item of homeboxsp">
        <td>item.serial_number</td>
        <ng-container *ngFor= "let sensor of item.sensors">
        <ul>
          <li>sensor.sensors_id</li>
        </ul>
        <td>item.active</td>
</tr>

【讨论】：

错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。 :(

发布你的 json 数组

"StatusCode":0,"StatusMessage":"OK","StatusDescription": ["homeboxpackage_id":"1","active":0,"homebox_id":"11" ,"serial_number":"serialn1","user_id":"31", "sensors": "0":"sensor_serial":"sensorserial1", "sensors_id":"11E805BA6732C3DB", "1":" sensor_serial":"sensorserial2", "sensors_id":"11E805BA6F1E6CE9", "2":"sensor_serial":"sensorserial3", "sensors_id":"11E805BA7716C775"]

您需要将响应更改为数组，在这个传感器中是一个对象

您对这个问题进行了排序吗？

【参考方案2】：

您需要将响应解析为 json 才能使用实际的响应正文。 res.json 将提取正文数据并将其返回给订阅者。确保先导入 rxjs 库。

//import  Http, Headers, RequestOptions, Response  from '@angular/http';
  //import  Observable  from 'rxjs';
  //import 'rxjs/add/operator/map';

this.ws.homeboxPGetAll().map((res:Response) => res.json()).subscribe(
  homeboxsp => 
    this.homeboxsp = homeboxsp.sensors;
       
);

【讨论】：

ws 是这样的： public homeboxPGetAll(): Observable let headers = new Headers(); headers.append('x-access-token', this.auth.getCurrentUser().token); return this.http.get(Api.getUrl(Api.URLS.homeboxPGetAll), headers: headers ) .map((response: Response) => let res = response.json(); if (res.StatusCode = == 1) this.auth.logout(); else return res.StatusDescription.map(homeboxP => return new HomeboxP(homeboxP); ); );