Работа с нулевыми объектами в ионном вводе - PullRequest
Новая
       3

Работа с нулевыми объектами в ионном вводе

0 голосов
/ 19 февраля 2020

Я пытаюсь сгенерировать редактируемую таблицу на основе результата вызываемого API, который может выглядеть следующим образом (json ниже). Причина, по которой некоторые данные являются нулевыми, заключается в том, что я вызываю API распознавания текста, чтобы он показывал только то, что было обнаружено на изображении.

Json результат: 

{
    "restaurant": null,
    "details": [
        {
            "text": null,
            "price": {
                "unitPrice": 5.0,
                "coordinateX": 389
            }
        },
        {
            "text": {
                "text": "Americano",
                "coordinateX": 311
            },
            "price": null
        },
        {
            "text": {
                "text": "Latte",
                "coordinateX": 130
            },
            "price": {
                "unitPrice": 43.24,
                "coordinateX": 205,
            }
        }
    ]
}

Получив результат от API, я затем сопоставляю его с объектом ImageResult:

Объект: 

export class ImageResult {
    constructor(
        public Restaurant: string,
        public CapturedDetails: Details[]
    ) {}
  }

Вызов: 

this.textCaptureService.GetText(formData).subscribe(data => {
        this.result = data;
      });

Моя проблема заключается в том, что я получаю ошибку cannot read property ___ of null, когда части объекта являются нулевыми в тегах ion-input. Как мне работать с объектами, которые могут иметь нулевые свойства. Например, если ноль, отображать пустую или пустую строку 

<ion-input [disabled]="false" [(ngModel)]="result.Restaurant" autofocus="true"> </ion-input>
<ion-row *ngFor="let item of items.Details">
      <ion-col></ion-col>
      <ion-col size="3" class="prices-table-name">
        <ion-input [disabled]="!true" [(ngModel)]="result.Text.Text" (press)="setEditable(item.Text.Text)"> </ion-input>
      </ion-col>
      <ion-col size="3" class="prices-table-value">
        <ion-input [disabled]="!true" [(ngModel)]="result.Price.UnitPrice" (press)="setEditable(item.Price.UnitPrice)"> </ion-input>
      </ion-col>
      <ion-col></ion-col>
    </ion-row>

1 Ответ

0 голосов
/ 19 февраля 2020

Используйте *ngIf, чтобы проверить, является ли result нулевым или нет. 

<ion-input *ngIf="result !== null" [disabled]="false" [(ngModel)]="result.Restaurant" autofocus="true"> </ion-input>
...