Question

我无法显示来自对象的数据，尤其是其属性。我使用Ionic项目（cli 4.9.0）向我的静态api发送了一个http请求。他旋转了一个对象，当尝试在html页面上显示该对象时，什么也没有出现。

首先，这是返回对象的内容：

{
    "status": 200,
    "data": [
        {
            "id": 2,
            "name": "Kit Kat",
            "barcode": "5000159020313",
            "created_at": "2019-01-24 23:15:21",
            "updated_at": "2019-01-24 23:15:21"
        }
    ],
    "msg": "Scan efetuado com sucesso"
}

这是我在Ionic上的代码：

首先我声明了变量resultScan

 options:BarcodeScannerOptions;
 scannedData: any = {};
 resultScan: any = [];
 idProduct: any = {};
 message: any[];
 TextMessage: string = '';
 ingredients: any[];

然后将请求返回的对象的数据放入 resultScan。

    this.api.searchBarcode(this.scannedData.text).then((result: any)=>{

                if(result.data.length > 0){
                    this.message = result.msg;
                    this.resultScan = result.data;
                    this.idProduct = result.data.id;}
    }

然后，在我的html页面上，我尝试访问的属性名称 resultScan，但是什么也没有出现。

    
   <div>
<button ion-button block (click)="scan()">Scan</button>
<div *ngIf="scannedData.text">
  <span>{{scannedData.text}}</span>


</div>

<div *ngIf="resultScan && resultScan.length">
    <div *ngIf="resultScan.text">
    <span>{{resultScan.text}}</span>
    <span>{{resultScan.name}}</span>
    </div>
</div>
  </div>

我不知道发生了什么，因为我已经发出了其他请求并使用相同的逻辑来获取属性，并且一切顺利。这次，我似乎什么也得不到，即使很难，我也知道有东西在里面。只是不被显示。我不知道这是因为对象是否作为json对象返回。我需要像昨天这样的帮助。谢谢Carolina Ventura

Answer 1

在您的前两个屏幕快照中，一切似乎都很好。但是在模板中，您需要遍历数组并像这样读取其属性：

<ng-container *ngIf="resultScan && resultScan.length">
    <div *ngFor="let scannedItem of resultScan">
        <button (click)="scan()"></button>
        <div *ngIf="scannedItem.text">
            <span>{{scannedItem.text}}</span>
            <p>scannedItem.name</p>
        </div>
    </div>
    <div>
        {{message}}
    <div>
</ng-container>

我将消息属性放在循环之外，否则它将重复与数组中返回的元素一样多的次数。 ng-container 不会在您的html中呈现。如果服务返回数据，则只有divs

显示json对象的属性|离子项目和Laravel Restful Api

1 个答案: