处理离子输入中可为空的对象

Question

我正在尝试根据我正在调用的 API 的结果生成一个 editable table，它看起来像这样（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;
      });

我的问题是，当 ion-input 标记中对象的某些部分为空时，我收到 cannot read property ___ of null 错误。如何处理可以具有空属性的对象。例如。如果为 null，则显示空白或空字符串

<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>

Answer 1

使用*ngIf检查result是否为空。

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

处理离子输入中可为空的对象

Dealing with null-able objects in ion-input

ionic-framework

angular

ionic4