Отображение атрибутов объекта json | Ionic Project и Laravel Restful Api

Question

У меня проблемы с отображением данных из объекта, особенно его атрибутов. Я отправил http-запрос к своему API-интерфейсу restful с моим проектом Ionic (cli 4.9.0). Он выделяет объект и при попытке отобразить его на 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-странице я попытался получить доступ к имени атрибута Результат сканирования, но ничего не появляется.

    
   <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 или нет. Мне нужна помощь, как вчера. Спасибо, Каролина Вентура

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>

Я поместил сообщение propty вне цикла, так как в противном случае оно будет повторяться столько раз, сколько возвращаются элементовв массиве. ng-контейнер не будет отображаться в вашем html.только если div возвращает данные